jQWidgets Forums

Tagged: cascading, Chain, dependant, jqxListBox, ListBox, PopupBox, select

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

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

Author

select chain listbox Posts

April 23, 2014 at 4:46 pm select chain listbox #53500

Participant

Hi, any ideas on how to build a similar select chain listbox as per
http://ycharts.com/companies/OCAP/chart/#/?securities=id:OCAP,include:true,,&calcs=id:price,include:true,,&zoom=1&startDate=&endDate=&format=real&recessions=false&chartView=

click on ‘Browse’ button, an a popup window will come.

I want to build the same using JQWidget, any help, guidance, short source code would be great!

Thanks….

April 24, 2014 at 6:17 am select chain listbox #53517

Dimitar

Participant

Hello thisisgood,

Here is a small sample:

<!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.10.2.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">
        $(document).ready(function () {
            var sourceCountries = [
                "United Kingdom",
                "USA"
            ];

            var sourceStatesUK = [
                "England",
                "Scotland",
                "Wales",
                "Northern Ireland"
            ];

            var sourceStatesUSA = [
                "Alabama",
                "Delaware",
                "Massachusetts",
                "New York",
                "Other"
            ];

            // Create a jqxListBox
            $("#countries").jqxListBox({ selectedIndex: 3, source: sourceCountries, width: 200, height: 250 });
            $("#states").jqxListBox({ width: 200, height: 250 });
            $('#countries').on('select', function (event) {
                var args = event.args;
                if (args) {
                    var item = args.item;
                    var label = item.label;
                    if (label == "United Kingdom") {
                        $("#states").jqxListBox({ source: sourceStatesUK });
                    } else if (label == "USA") {
                        $("#states").jqxListBox({ source: sourceStatesUSA });
                    };
                }
            });
        });
    </script>
</head>
<body>
    <div id='countries' style="float: left; margin-right: 10px;">
    </div>
    <div id='states' style="float: left;">
    </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.