jQWidgets Forums

jQuery UI Widgets Forums Lists DropDownList populate one jqxdropdownlist based on selection in another

This topic contains 3 replies, has 2 voices, and was last updated by  Nadezhda 10 years, 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • Sayan
    Participant

    how can I populate one jqxdropdownlist based on selection of another. I need to populate states on the basis of country selected How can this be done?


    Nadezhda
    Participant

    Hello Sayan,

    Here is an example which shows how to populate one jqxDropdownlist based on selection in another jqxDropdownlist.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.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/jqxdatatable.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/customers.txt";
                // prepare the data
                var customersSource =
             {
                 dataType: "json",
                 dataFields: [
                     { name: 'CompanyName' },
                     { name: 'CustomerID' }
                 ],
                 url: url
             };
                var customersAdapter = new $.jqx.dataAdapter(customersSource);
                $("#customers").jqxDropDownList(
                {
                    source: customersAdapter,
                    width: 300,
                    height: 25,
                    promptText: "Select customer...",
                    displayMember: 'CompanyName',
                    valueMember: 'CustomerID'
                });
                var ordersSource =
                {
                    dataType: "json",
                    dataFields: [
                        { name: 'CustomerID' },
                        { name: 'OrderID' },
                        { name: 'ShipCity' },
                        { name: 'OrderDate' },
                        { name: 'ShipName' },
                        { name: 'ShipCountry' },
                        { name: 'ShipAddress' }
                    ],
                    url: '../sampledata/orders.txt'
                };
                var ordersAdapter = new $.jqx.dataAdapter(ordersSource);
                // Create a jqxDropDownList
                $("#orders").jqxDropDownList(
                        {
    
                            width: 300,
                            height: 25,
                            disabled: true,
                            promptText: "Select order...",
                            displayMember: 'OrderID',
                            valueMember: 'CustomerID'
                        });
    
                $("#customers").bind('select', function (event) {
                    if (event.args) {
                        $("#orders").jqxDropDownList({ disabled: false, selectedIndex: -1 });
                        var value = event.args.item.value;
                        ordersSource.data = { CustomerID: value };
                        ordersAdapter = new $.jqx.dataAdapter(ordersSource);
                        $("#orders").jqxDropDownList({ source: ordersAdapter });
                    }
                });
    
                $("#orders").bind('select', function (event) {
                    if (event.args) {
                        var index = $("#orders").jqxDropDownList('selectedIndex');
                        if (index != -1) {
                            var record = ordersAdapter.records[index];
                            var detailsSource =
                            {
                                dataType: "json",
                                dataFields: [
                                    { name: 'CustomerID' },
                                    { name: 'OrderID' },
                                    { name: 'ShipCity' },
                                    { name: 'OrderDate' },
                                    { name: 'ShipName' },
                                    { name: 'ShipCountry' },
                                    { name: 'ShipAddress' }
                                ],
                                localData: record
                            };
                            var detailsAdapter = new $.jqx.dataAdapter(detailsSource);
                            $("#orderInfo").jqxDataTable({
                                source: detailsAdapter,
                                width: 500,
                                columns: [{ text: "Order Date", dataField: "OrderDate", cellsFormat: 'd' }, { text: "Ship Country", dataField: "ShipCountry" },
                                    { text: "Ship Address", dataField: "ShipAddress" }, { text: "Ship Name", dataField: "ShipName" }]
                            });
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
        <div>
            <span style="margin-top: 6px; font-size: 12px; font-family: verdana; float: left;">Customers:</span><div style="margin-left: 5px; float: left;" id="customers"></div>
            <div style='clear: both;'></div>
            <div style='margin-top: 20px;'>
                <span style="margin-top: 6px; font-size: 12px; font-family: verdana; float: left;">Orders:</span><div style="margin-left: 5px; float: left;" id="orders"></div>
                <br />
                <div style="margin-top: 25px; font-size: 12px;" id="orderInfo"></div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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


    Sayan
    Participant

    Code is not working.Please help
    var LOB_ddl_source = {
    datatype: “json”,
    datafields: [
    { name: ‘New Div’, type: ‘string’ }, ],
    url: pro + ‘//’ + host + ‘/Client_Upload/CU_get_ddl_data’,
    data: { Id: ‘2’ }

    };

    var Productline_ddl_source = {
    datatype: “json”,
    datafields: [
    { name: ‘Lob New’, type: ‘string’ }, ],
    url: pro + ‘//’ + host + ‘/Client_Upload/CU_get_productline_data’,
    // data: { Id: ‘1’ }

    };

    var LOBAdapter = new $.jqx.dataAdapter(LOB_ddl_source);
    var ProductlineAdapter = new $.jqx.dataAdapter(Productline_ddl_source);
    $(“#LOB_ddl”).jqxDropDownList({
    promptText: ‘LOB’, autoOpen: true, source: LOBAdapter, displayMember: “New Div”, valueMember: “New Div”,
    width: 134, height: 25, animationType: ‘fade’, dropDownHorizontalAlignment: ‘left’, autoDropDownHeight: true
    });

    $(“#Productline_ddl”).jqxDropDownList({
    promptText: ‘Productline’, autoOpen: true,
    displayMember: “Lob New”, valueMember: “Lob New”, width: 134, height: 25, autoDropDownHeight: true
    });
    $(“#LOB_ddl”).bind(‘select’, function (event) {
    //debugger;
    if (event.args) {
    alert(“in pdctlie”);
    $(“#Productline_ddl”).jqxDropDownList({ disabled: false, selectedIndex: -1 });
    var value = event.args.item.value;
    alert(value);
    Productline_ddl_source.data = {LOB: value };
    ProductlineAdapter = new $.jqx.dataAdapter(Productline_ddl_source);
    $(“#Productline_ddl”).jqxDropDownList({ source: ProductlineAdapter });
    }
    });


    Nadezhda
    Participant

    Hi Sayan,

    This part of your code looks correctly. Do you have some issue with the above example? Please, check if scripts and urls are referred correctly. I also suggest you to use the latest version of jQWidgets (3.5.0).

    Best Regards,
    Nadezhda

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.