ComboBox from selectbox

[AceDZNMember]

Hi there!
I’ve tried to make a combo-box from a selectbox at my page.
the code I’ve used is:

var theme = getTheme();
			 var source = [];
			 var i = 0;
			 $.each($("#country").children(), function(k, v) {
				var code = $(v).attr('code');
				var html = "<div>";
				html += "<img style='float: left;margin-top: 4px;margin-right: 5px' />";
				html += "<div style='margin-top: 1px;font-size: 13px'>";
                html += "<div>" + $(v).text() + "</div><div style='margin-top: 10px'></div></div>";
				code = $(v).attr('code');
				source[i++] = {'html': html, 'title': $(v).text(), 'code': code};
			 });
			$("#jqxListBox").jqxComboBox({ source: source, selectedIndex: 0, width: '230', height: '25px'});
			

Now I can see all my select list in the combo box – everything is working.
How Can I pass the vars from this item (for example: code ) to another input field.
Another thing I want is change the selected item in the selectbox when I select an item from the ComboBox.
are those things possible?

Best regards
alex

[Peter StoevKeymaster]

Hi Alex,

In the example code below, the jqxComboBox is filled with items from a ‘Select’ list as in your code. The ComboBox is triggering the ‘select’ event and in the event handler the ‘code’ value is stored in the code variable and also the selected item in the ‘Select’ list is changed when the ComboBox’s selection is changed.

<script type="text/javascript">
    $(document).ready(function () {
        var theme = getTheme();
        // Create a jqxComboBox
        var source = [];
        var i = 0;
        $.each($("#country").children(), function (k, v) {
            var code = $(v).attr('code');
            var html = "<div>";
            html += "<div style='margin-top: 1px;font-size: 13px'>";
            html += $(v).text() + "</div></div>";
            code = $(v).attr('code');
            source[i++] = { 'html': html, 'title': $(v).text(), 'code': code };
        });
        $("#jqxComboBox").jqxComboBox({ source: source, selectedIndex: 0, width: '230', height: '25px' });
        $("#jqxComboBox").bind('select', function (event) {
            if (event.args) {
                var args = event.args;
                // get the code.
                var code = args.item.originalItem.code;
                       
                // select the item in the 'select' tag.
                var index = args.item.index;
                $("#country").find('option').eq(index).attr("selected", "true");
            }
        });
    });
</script>
<div style='float: left; width: 500px;' id='jqxWidget'>
    <div style='float: left;' id='jqxComboBox'></div>
    <div style='float: left;' id='Select'>
        <select style='height: 250px; width: 200px; margin-left: 30px;' size='2' id='country'>
            <option code="myCode">Brazil</option>
            <option>Germany</option>
            <option>United States</option>
            <option>France</option>               
        </select>
    </div>
</div>

Hope this helps you.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[AceDZNMember]

Uncaught TypeError: Cannot read property ‘originalItem’ of undefined

[Peter StoevKeymaster]

Hi Alex.

Which version of jQWidgets, do you use?

Looking forward to your reply.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[AceDZNMember]

the last one I think…
downloaded it yesterday..
the scripts I include is:
gettheme.js
jqxcore.js
jqxexpander.js
jqxbuttons.js
jqxscrollbar.js
jqxlistbox.js
jqxdropdownlist.js
jqxcombobox.js

may I forgot something?

[Peter StoevKeymaster]

Ok, can you then paste here the full page’s source code, so I can debug it.

Looking forward to your reply.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Peter StoevKeymaster]

Hi Alex,

There was an issue in the code I pasted you. Please, excuse me about that.

Here’s the modified version.

<script type="text/javascript">
    $(document).ready(function () {
        var theme = getTheme();
        // Create a jqxComboBox
        var source = [];
        var i = 0;
        $.each($("#country").children(), function (k, v) {
            var code = $(v).attr('code');
            var html = "<div>";
            html += "<div style='margin-top: 1px;font-size: 13px'>";
            html += $(v).text() + "</div></div>";
            code = $(v).attr('code');
            source[i++] = { 'html': html, 'title': $(v).text(), 'code': code };
        });
        $("#jqxComboBox").jqxComboBox({ source: source, selectedIndex: 0, width: '230', height: '25px' });
        $("#jqxComboBox").bind('select', function (event) {
            if (event.args) {
                var args = event.args;
                // get the code.
				var item =$("#jqxComboBox").jqxComboBox('getItem', args.index);
                var code = item.originalItem.code;
                // select the item in the 'select' tag.
                var index = item.index;
                $("#country").find('option').eq(index).attr("selected", "true");
            }
        });
    });
</script>
<div style='float: left; width: 500px;' id='jqxWidget'>
    <div style='float: left;' id='jqxComboBox'></div>
    <div style='float: left;' id='Select'>
        <select style='height: 250px; width: 200px; margin-left: 30px;' size='2' id='country'>
            <option code="myCode">Brazil</option>
            <option>Germany</option>
            <option>United States</option>
            <option>France</option>
        </select>
    </div>
</div>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[AceDZNMember]

Thank You Very Much – it’s working… 🙂

Can I make the combobox get the selected item from the selectbox to make it the first shown item?

[Peter StoevKeymaster]

Hi Alex,

You can use the following code:

var index = $("#country")[0].selectedIndex;
$("#jqxComboBox").jqxComboBox({selectedIndex: index});	

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[AceDZNMember]

THANK YOU, THANK YOU, THANK YOU 🙂

[Author]

Posts