jQWidgets Forums

jQuery UI Widgets › Forums › Lists › ComboBox › How we can bind combobox dynamically on dropdown selection

Tagged: , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 12 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    How we can bind combobox dynamically on dropdown selection Posts
  • March 11, 2013 at 1:48 pm How we can bind combobox dynamically on dropdown selection #16693

    Narendra
    Participant

    Hi frnds,

    I am using Json object to bind the data to the Combobox from SQL Server, and I am using a Dropdown List with items like(State,City,etc), Now my requirement is that How the ComboBox data will change dynamically by selecting the item in Dropdown list, For Example If i choose State item in dropdownlist then the data will be like Andrapradesh, Maharashtra, etc in ComboBox, If I select City then the data will be Hyderabad, Kolkatha change in the ComboBox.

    Thanks in Advance…

    Narendra..

    March 11, 2013 at 2:12 pm How we can bind combobox dynamically on dropdown selection #16701

    Dimitar
    Participant

    Hello Narendra,

    Here is a sample that demonstrates the required behaviour:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var source = [
                        "State",
                        "City"
    		        ];
                $("#jqxdropdownlist").jqxDropDownList({ source: source, selectedIndex: 0, width: '200px', height: '25px', dropDownHeight: "50px" });
                $('#jqxdropdownlist').bind('select', function (event) {
                    var args = event.args;
                    var item = $('#jqxdropdownlist').jqxDropDownList('getItem', args.index);
                    if (item.label == "State") {
                        $("#jqxcombobox").jqxComboBox({ source: sourceS });
                    } else if (item.label == "City") {
                        $("#jqxcombobox").jqxComboBox({ source: sourceC });
                    };
                });
                var sourceS = [
                        "Andrapradesh",
                        "Maharashtra"
    		        ];
                var sourceC = [
                    "Hyderabad",
                    "Kolkatha",
                    ];
                $("#jqxcombobox").jqxComboBox({ source: sourceS, selectedIndex: 0, width: '200px', height: '25px', dropDownHeight: "50px" });
            });
        </script>
    </head>
    <body>
        <div id='jqxdropdownlist'>
        </div>
        <div id='jqxcombobox'>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.