jQWidgets Forums

Tagged: DropDownList, jqxDropDownList, select

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 12 years, 2 months ago.

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

Author

How i can show/hide the jqxdropdownlist Posts

March 21, 2013 at 8:55 am How i can show/hide the jqxdropdownlist #17609

Participant

Hi,

I am using two jqxdropdownlists with checkboxes, suppose drp1 and drp2, now i want to hide the drp2 first on pageload, now i want to show the drp2 if there is any selection made in drp1, if not the drp2 is in hide defaultly…….

How can i achieve it, which event i want to use……..?

Plz help me its urgent………!

March 21, 2013 at 9:16 am How i can show/hide the jqxdropdownlist #17613

Dimitar

Participant

Hello narendra.pvnb,

You can modify the second dropdownlist visibility or display CSS properties (using jQuery’s css method) on the first one’s select event.

Best Regards,
Dimitar

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

March 21, 2013 at 9:25 am How i can show/hide the jqxdropdownlist #17616

Narendra

Participant

Here I using checkboxes in drp1 and I can select multiple options, If i didn’t select any one in drp1 then the drp2 will be in hidden

So the answer you given is not working here

I didn’t understood in which event(select, checkChange etc….) of drp1 i want to write code for show or hide the drp2

Plz provide me code for it?

Thanks in advance

March 21, 2013 at 9:50 am How i can show/hide the jqxdropdownlist #17619

Dimitar

Participant

Hi narendra.pvnb,

Here is the solution:

<!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/gettheme.js"></script>
    <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/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/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var url = "../sampledata/customers.txt";
            // prepare the data
            var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'CompanyName' },
                        { name: 'ContactName' }
                    ],
                    id: 'id',
                    url: url,
                    async: false
                };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create a jqxDropDownList
            $("#jqxWidget").jqxDropDownList({ checkboxes: true, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25, theme: theme });
            var check = function () {
                var items = $("#jqxWidget").jqxDropDownList('getItems');
                var count = 0;
                $.each(items, function () {
                    var item = this;
                    if (item.checked == true) {
                        count++;
                    };
                });
                if (count == 0) {
                    $("#secondList").css("display", "none");
                } else {
                    $("#secondList").css("display", "block");
                };
            };
            check();
            // subscribe to the checkChange event.
            $("#jqxWidget").on('checkChange', function (event) {
                check();
            });
            $("#secondList").jqxDropDownList({ source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25, theme: theme });
        });
    </script>
</head>
<body>
    <div style='float: left; margin-right: 10px;' id='jqxWidget'>
    </div>
    <div id="secondList">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.