selectbox change select by selecting list item

[AceDZNMember]

Hi There,
I want to change the selected item in the selectbox when I select an item from the DropDownList.
is this possible?

[Peter StoevKeymaster]

Hi alex,

You can subcribe to the ‘select’ event and set the ‘Selected’ attribute of the specific selectbox item depending on the jqxDropDownList’s selected index.

Code example:

<script type="text/javascript">
    $(document).ready(function () {
        var theme = getTheme();
        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 };
        });
        $("#jqxDropDownList").jqxDropDownList({ source: source, selectedIndex: 0, width: '230', height: '25px' });
        $("#jqxDropDownList").bind('select', function (event) {
            if (event.args) {
                var args = event.args;
                // 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='jqxDropDownList'>
    </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]

Uncaught TypeError: Cannot read property ‘index’ of undefined

[Peter StoevKeymaster]

Could you please paste here your page’s code, so I can debug it?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Peter StoevKeymaster]

Sorry, I had an issue in the code I pasted you. The selection code should look like below:

       $("#jqxDropDownList").bind('select', function (event) {
            if (event.args) {
                var args = event.args;
                // select the item in the 'select' tag.        	
		var index = args.index;
                $("#country").find('option').eq(index).attr("selected", "true");
            }
        });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[AceDZNMember]

Thank You Very Much – it’s working…

[AceDZNMember]

here is another thing with this: I want to get the selectbox’s selected item to be the first at the DropDownListBox
this is the code I’ve used:

var index = $("#language")[0].selectedIndex;
				$("#languagea").jqxDropDownList({ width: '230px', height: '25px', scrollBarSize:'2', autoDropDownHeight: true, selectedIndex: index });
                $("#languagea").jqxDropDownList('loadFromSelect', 'language');
                $("#languagea").jqxDropDownList('selectedIndex', '0');
				 $("#languagea").bind('select', function (event) {
						if (event.args) {
							var args = event.args;
							// select the item in the 'select' tag.
							var index = args.index;
							$("#language").find('option').eq(index).attr("selected", "true");
						}
					});		

[AceDZNMember]

oh, nevermind I saw Now mine mistake:
( $(“#languagea”).jqxDropDownList(‘selectedIndex’, ‘0’); need to be deleted)

here is the final code:

var index = $("#language")[0].selectedIndex;
				$("#languagea").jqxDropDownList({ width: '230px', height: '25px', scrollBarSize:'2', autoDropDownHeight: true, selectedIndex: index });
                $("#languagea").jqxDropDownList('loadFromSelect', 'language');
                $("#languagea").jqxDropDownList('selectedIndex', index);
				 $("#languagea").bind('select', function (event) {
						if (event.args) {
							var args = event.args;
							// select the item in the 'select' tag.
							var index = args.index;
							$("#language").find('option').eq(index).attr("selected", "true");
						}
					});		

[Author]

Posts