In this post, we will show you how to save the jqxDropDownList’s selection and load it from a cookie when the page is reloaded.
1. Add the jqxDropDownList to your web page.
2. Try to load the selection from a cookie. The cookie’s name is jqxDropDownList_jqxWidget.
var index = $.jqx.cookie.cookie("jqxDropDownList_jqxWidget");if (undefined == index) index = 0;
3. Initialize the DropDownList and set the ‘selectedIndex’ to point to the index property.
$("#jqxWidget").jqxDropDownList({ selectedIndex: index, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25});
4. Bind to the jqxDropDownList’s ‘select’ event and save the index.
$("#jqxWidget").bind('select', function (event) { // save the index in cookie. $.jqx.cookie.cookie("jqxDropDownList_jqxWidget", event.args.index);});
When the page is reloaded, the jqxDropDownList widget will be initialized with the saved index.
Below is the full source code:
<!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/jquery-1.7.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></head><body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { // prepare the data var source = { datatype: "json", datafields: [ { name: 'CompanyName' }, { name: 'ContactName' } ], id: 'id', url: "../sampledata/customers.txt", async: false }; var dataAdapter = new $.jqx.dataAdapter(source); var index = $.jqx.cookie.cookie("jqxDropDownList_jqxWidget"); if (undefined == index) index = 0; $("#jqxWidget").jqxDropDownList({ selectedIndex: index, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25}); // bind to the select event. $("#jqxWidget").bind('select', function (event) { // save the index in cookie. $.jqx.cookie.cookie("jqxDropDownList_jqxWidget", event.args.index); }); }); </script> <div id='jqxWidget'> </div> </div></body></html>
