jQWidgets Forums

Tagged: boxes, cascading, checkbox, checkboxes, dropdown, DropDownList, item, jqxDropDownList, linked, source, update

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 10 years, 4 months ago.

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

Author

link dropdown lists Posts

November 3, 2014 at 8:53 pm link dropdown lists #62066

Participant

I have two dropdowns one for services and one for channels using checkboxes. I want to narrow down the channel list when a service is checked from the first dropdown box.

like the country state linked boxes.

November 4, 2014 at 7:30 am link dropdown lists #62078

Dimitar

Participant

Hello hk,

Here is an example. We hope it is helpful to you:

<!DOCTYPE html>
<html lang="en">
<head>
    <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/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">
        $(document).ready(function () {
            var source1 = [
                "Blue",
                "Green",
                "Red"
		    ];

            var source2 = [
                "Sapphire",
                "Ruby",
                "Emerald",
                "Lazurite"
            ];

            // Create a jqxDropDownList
            $("#colorList").jqxDropDownList({ source: source1, width: '200', height: '25', autoDropDownHeight: true, checkboxes: true });
            $("#colorList").jqxDropDownList('checkAll');
            $("#colorList").on('checkChange', function (event) {
                if (event.args) {
                    var item = event.args.item;
                    var value = item.value;
                    var label = item.label;
                    var checked = item.checked;
                    if (checked) {
                        switch (label) {
                            case "Blue":
                                $("#flagList").jqxDropDownList('addItem', 'Sapphire');
                                $("#flagList").jqxDropDownList('addItem', 'Lazurite');
                                break;
                            case "Red":
                                $("#flagList").jqxDropDownList('addItem', 'Ruby');
                                break;
                            case "Green":
                                $("#flagList").jqxDropDownList('addItem', 'Emerald');
                                break;
                        }
                    } else {
                        switch (label) {
                            case "Blue":
                                $("#flagList").jqxDropDownList('removeItem', 'Sapphire');
                                $("#flagList").jqxDropDownList('removeItem', 'Lazurite');
                                break;
                            case "Red":
                                $("#flagList").jqxDropDownList('removeItem', 'Ruby');
                                break;
                            case "Green":
                                $("#flagList").jqxDropDownList('removeItem', 'Emerald');
                                break;
                        }
                    }
                }
            });
            $("#flagList").jqxDropDownList({ source: source2, width: '200', height: '25', autoDropDownHeight: true });
        });
    </script>
</head>
<body>
    Colors:
    <div id='colorList'>
    </div>
    <br />
    Gems:
    <div id='gemList'>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 4, 2014 at 6:09 pm link dropdown lists #62128

Participant

ineed the above code to be more dynamic, as both my dropdowns are getting populated from the database using a json query.

how can I make the second query have a where service_id is what is selected in the first dropdown.

November 4, 2014 at 8:47 pm link dropdown lists #62135

Participant

figured it out thanks anyways

November 7, 2014 at 7:43 pm link dropdown lists #62398

Participant

how can I refresh my channel dropdown list in the checkchange function of the first service list

means if I change the servicelist the channellist should get updated accoprdingly . I want the two to be separate entities at first but change in the checkchange function

November 10, 2014 at 6:54 am link dropdown lists #62438

Dimitar

Participant

Hi hk,

That is what the example we provided you does. On checking items from colorList, gemList items are narrowed down. By the way, in our code, “flagList” should we replaced with “gemList”, i.e.:

<!DOCTYPE html>
<html lang="en">
<head>
    <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/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">
        $(document).ready(function () {
            var source1 = [
                "Blue",
                "Green",
                "Red"
		    ];

            var source2 = [
                "Sapphire",
                "Ruby",
                "Emerald",
                "Lazurite"
            ];

            // Create a jqxDropDownList
            $("#colorList").jqxDropDownList({ source: source1, width: '200', height: '25', autoDropDownHeight: true, checkboxes: true });
            $("#colorList").jqxDropDownList('checkAll');
            $("#colorList").on('checkChange', function (event) {
                if (event.args) {
                    var item = event.args.item;
                    var value = item.value;
                    var label = item.label;
                    var checked = item.checked;
                    if (checked) {
                        switch (label) {
                            case "Blue":
                                $("#gemList").jqxDropDownList('addItem', 'Sapphire');
                                $("#gemList").jqxDropDownList('addItem', 'Lazurite');
                                break;
                            case "Red":
                                $("#gemList").jqxDropDownList('addItem', 'Ruby');
                                break;
                            case "Green":
                                $("#gemList").jqxDropDownList('addItem', 'Emerald');
                                break;
                        }
                    } else {
                        switch (label) {
                            case "Blue":
                                $("#gemList").jqxDropDownList('removeItem', 'Sapphire');
                                $("#gemList").jqxDropDownList('removeItem', 'Lazurite');
                                break;
                            case "Red":
                                $("#gemList").jqxDropDownList('removeItem', 'Ruby');
                                break;
                            case "Green":
                                $("#gemList").jqxDropDownList('removeItem', 'Emerald');
                                break;
                        }
                    }
                }
            });
            $("#gemList").jqxDropDownList({ source: source2, width: '200', height: '25', autoDropDownHeight: true });
        });
    </script>
</head>
<body>
    Colors:
    <div id='colorList'>
    </div>
    <br />
    Gems:
    <div id='gemList'>
    </div>
</body>
</html>

I am sorry for the oversight.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.