jQWidgets Forums
jQuery UI Widgets › Forums › Lists › DropDownList › populate one jqxdropdownlist based on selection in another
This topic contains 3 replies, has 2 voices, and was last updated by Nadezhda 10 years, 7 months ago.
-
Author
-
how can I populate one jqxdropdownlist based on selection of another. I need to populate states on the basis of country selected How can this be done?
Hello Sayan,
Here is an example which shows how to populate one jqxDropdownlist based on selection in another jqxDropdownlist.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../scripts/demos.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/jqxdatatable.js"></script> <script type="text/javascript"> $(document).ready(function () { var url = "../sampledata/customers.txt"; // prepare the data var customersSource = { dataType: "json", dataFields: [ { name: 'CompanyName' }, { name: 'CustomerID' } ], url: url }; var customersAdapter = new $.jqx.dataAdapter(customersSource); $("#customers").jqxDropDownList( { source: customersAdapter, width: 300, height: 25, promptText: "Select customer...", displayMember: 'CompanyName', valueMember: 'CustomerID' }); var ordersSource = { dataType: "json", dataFields: [ { name: 'CustomerID' }, { name: 'OrderID' }, { name: 'ShipCity' }, { name: 'OrderDate' }, { name: 'ShipName' }, { name: 'ShipCountry' }, { name: 'ShipAddress' } ], url: '../sampledata/orders.txt' }; var ordersAdapter = new $.jqx.dataAdapter(ordersSource); // Create a jqxDropDownList $("#orders").jqxDropDownList( { width: 300, height: 25, disabled: true, promptText: "Select order...", displayMember: 'OrderID', valueMember: 'CustomerID' }); $("#customers").bind('select', function (event) { if (event.args) { $("#orders").jqxDropDownList({ disabled: false, selectedIndex: -1 }); var value = event.args.item.value; ordersSource.data = { CustomerID: value }; ordersAdapter = new $.jqx.dataAdapter(ordersSource); $("#orders").jqxDropDownList({ source: ordersAdapter }); } }); $("#orders").bind('select', function (event) { if (event.args) { var index = $("#orders").jqxDropDownList('selectedIndex'); if (index != -1) { var record = ordersAdapter.records[index]; var detailsSource = { dataType: "json", dataFields: [ { name: 'CustomerID' }, { name: 'OrderID' }, { name: 'ShipCity' }, { name: 'OrderDate' }, { name: 'ShipName' }, { name: 'ShipCountry' }, { name: 'ShipAddress' } ], localData: record }; var detailsAdapter = new $.jqx.dataAdapter(detailsSource); $("#orderInfo").jqxDataTable({ source: detailsAdapter, width: 500, columns: [{ text: "Order Date", dataField: "OrderDate", cellsFormat: 'd' }, { text: "Ship Country", dataField: "ShipCountry" }, { text: "Ship Address", dataField: "ShipAddress" }, { text: "Ship Name", dataField: "ShipName" }] }); } } }); }); </script> </head> <body> <div> <span style="margin-top: 6px; font-size: 12px; font-family: verdana; float: left;">Customers:</span><div style="margin-left: 5px; float: left;" id="customers"></div> <div style='clear: both;'></div> <div style='margin-top: 20px;'> <span style="margin-top: 6px; font-size: 12px; font-family: verdana; float: left;">Orders:</span><div style="margin-left: 5px; float: left;" id="orders"></div> <br /> <div style="margin-top: 25px; font-size: 12px;" id="orderInfo"></div> </div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Code is not working.Please help
var LOB_ddl_source = {
datatype: “json”,
datafields: [
{ name: ‘New Div’, type: ‘string’ }, ],
url: pro + ‘//’ + host + ‘/Client_Upload/CU_get_ddl_data’,
data: { Id: ‘2’ }};
var Productline_ddl_source = {
datatype: “json”,
datafields: [
{ name: ‘Lob New’, type: ‘string’ }, ],
url: pro + ‘//’ + host + ‘/Client_Upload/CU_get_productline_data’,
// data: { Id: ‘1’ }};
var LOBAdapter = new $.jqx.dataAdapter(LOB_ddl_source);
var ProductlineAdapter = new $.jqx.dataAdapter(Productline_ddl_source);
$(“#LOB_ddl”).jqxDropDownList({
promptText: ‘LOB’, autoOpen: true, source: LOBAdapter, displayMember: “New Div”, valueMember: “New Div”,
width: 134, height: 25, animationType: ‘fade’, dropDownHorizontalAlignment: ‘left’, autoDropDownHeight: true
});$(“#Productline_ddl”).jqxDropDownList({
promptText: ‘Productline’, autoOpen: true,
displayMember: “Lob New”, valueMember: “Lob New”, width: 134, height: 25, autoDropDownHeight: true
});
$(“#LOB_ddl”).bind(‘select’, function (event) {
//debugger;
if (event.args) {
alert(“in pdctlie”);
$(“#Productline_ddl”).jqxDropDownList({ disabled: false, selectedIndex: -1 });
var value = event.args.item.value;
alert(value);
Productline_ddl_source.data = {LOB: value };
ProductlineAdapter = new $.jqx.dataAdapter(Productline_ddl_source);
$(“#Productline_ddl”).jqxDropDownList({ source: ProductlineAdapter });
}
});Hi Sayan,
This part of your code looks correctly. Do you have some issue with the above example? Please, check if scripts and urls are referred correctly. I also suggest you to use the latest version of jQWidgets (3.5.0).
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.