jQuery UI Widgets Forums Lists DropDownList Load data from select (set checkbox checked)

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

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

  • andreas20
    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


    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/

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

You must be logged in to reply to this topic.