bind two combo box - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

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

Author

bind two combo box Posts

November 26, 2012 at 10:00 pm bind two combo box #11496

Member

Hi Guys..
can anyone tell me how to bind two combo box using php and jquery?
like if one is for country and second one is provinces so whenever i select country to according to country province should show in combo box..
Regards..
Farhad Idrees

November 27, 2012 at 6:55 am bind two combo box #11506

Dimitar

Participant

Hello Farhad Idrees,

Here is an example on chaining two comboboxes. A PHP example will be available in the demo section of the site in the next several days.

<!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>
    <title>jQuery ComboBox</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <style type="text/css">
        #listBoxjqxcombobox
        {
            width: auto;
        }
    </style>
    <script type="text/javascript" src="../scripts/jquery-1.8.3.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/jqxcombobox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = [
                    "UK",
                    "USA"
                   ];
            var sourceUK = [
                   "England",
                   "Northern Ireland",
                   "Scotland",
                   "Wales"
                   ];
            var sourceUSA = [
                   "Alaska",
                   "California",
                   "Iowa",
                   "Washington"
                   ];
            // Create a jqxComboBox
            $("#jqxcombobox1").jqxComboBox({ source: source, width: '200px', height: '25px', dropDownHeight: '50px' });
            $("#jqxcombobox2").jqxComboBox({ source: source, width: '200px', height: '25px', disabled: true });
            $('#jqxcombobox1').bind('select', function (event) {
                $("#jqxcombobox1").jqxComboBox({ disabled: true });
                $("#jqxcombobox2").jqxComboBox({ disabled: false });
                if (event.args.item.value == "UK") {
                    $("#jqxcombobox2").jqxComboBox({ source: sourceUK, dropDownHeight: '100px' });
                } else if (event.args.item.value == "USA") {
                    $("#jqxcombobox2").jqxComboBox({ source: sourceUSA, dropDownHeight: '100px' });
                };
            });
        });
    </script>
</head>
<body>
    <div id='content'>
        <div style="float: left;" id='jqxcombobox1'>
        </div>
        <div style="float: left;" id="jqxcombobox2">
        </div>
        <div style="float: left;" id="jqxcombobox3">
        </div>
    </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.