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);
