Load data from select (set checkbox checked) - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: check, checkbox, dropdwonlist, jqxDropDownList, select

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

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

Author

Load data from select (set checkbox checked) Posts

January 22, 2013 at 2:10 pm Load data from select (set checkbox checked) #14056

Member

I am initializing a jqxDropDownlist from select element and I am adding checkboxes.
How can I set some of the checkboxes checked, when initialized?
Any ideas?

Thank you

January 23, 2013 at 6:34 am Load data from select (set checkbox checked) #14087

Dimitar

Participant

Hello andreas20,

Here is an example, based on the demo Load data from select:

<!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>
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" />
    <meta name="description" content="The jqxDropDownList can be populated with data from an existing
        select element making it easier to upgrade your pages using jqxDropDownList." />
    <title id='Description'>The jqxDropDownList can be populated with data from an existing
        select element making it easier to upgrade your pages using jqxDropDownList.
    </title>
    <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/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>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                // Create a jqxDropDownList
                $("#jqxDropDownList").jqxDropDownList({ width: '200px', height: '25px', theme: theme });
                // Load the data from the Select html element.
                $("#jqxDropDownList").jqxDropDownList('loadFromSelect', 'select');
                // updates the select's selection.
                $("#jqxDropDownList").bind('select', function (event) {
                    if (event.args) {
                        var args = event.args;
                        // select the item in the 'select' tag.
                        var index = args.item.index;
                        $("#select").find('option').eq(index).attr("selected", "true");
                    }
                });
                // updates the dropdownlist's selection.
                $("#select").bind('change', function (event) {
                    var index = $("#select")[0].selectedIndex;
                    $("#jqxDropDownList").jqxDropDownList('selectIndex', index);
                    $("#jqxDropDownList").jqxDropDownList('ensureVisible', index);
                });
                // selects the first item.
                $("#jqxDropDownList").jqxDropDownList('selectedIndex', '0');
                $("#jqxDropDownList").jqxDropDownList({ checkboxes: true });
                $("#jqxDropDownList").jqxDropDownList('checkIndex', 1);
                $("#jqxDropDownList").jqxDropDownList('checkIndex', 3);
                $("#jqxDropDownList").jqxDropDownList('checkIndex', 5);
            });
        </script>
        <div style='float: left; width: 500px;' id='jqxWidget'>
            <div style='float: left;' id='jqxDropDownList'>
            </div>
            <div style='float: left;'>
                <select style='height: 25px; width: 200px; margin-left: 30px;' id='select'>
                    <option>Affogato</option>
                    <option>Americano</option>
                    <option>Bicerin</option>
                    <option>Breve</option>
                    <option>Café Bombón</option>
                    <option>Caffé Corretto</option>
                    <option>Café Crema</option>
                    <option>Caffé Latte</option>
                    <option>Caffé macchiato</option>
                    <option>Café mélange</option>
                    <option>Coffee milk</option>
                    <option>Cafe mocha</option>
                    <option>Cappuccino</option>
                    <option>Carajillo</option>
                    <option>Cuban espresso</option>
                    <option>Espresso</option>
                    <option>The Flat White</option>
                    <option>Frappuccino</option>
                    <option>Galao</option>
                    <option>Greek frappé coffee</option>
                    <option>Iced Coffee</option>
                    <option>Indian filter coffee</option>
                    <option>Instant coffee</option>
                    <option>Irish coffee</option>
                    <option>Liqueur coffee</option>
                </select>
            </div>
        </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.