I want to populate multiple select drop down list(3 different drop down list, not related) with JSON.
<script type="text/javascript">
$(document).ready(function() {
$.post("/Search/getDDListData/", { controlName: "MinPrice" }, function(data1) {
populateDropdown($("#minPriceList"), data1);
});
}); function populateDropdown(select, data) { select.html(''); $.each(data, function(id, option) { select.append($('').val(option.value).html(option.name)); }); }
/Search/getDDListData/ is function get data from database, response back with JSON data.
public JsonResult getDDListData(string controlName)
{
IQueryable<DropDownListData> DDcontrolDatas = RDrepository.getDropDownList(controlName);
var jsonData = from DDcontrolData in DDcontrolDatas
select new JsonDropDownList
{
ListID = DDcontrolData.ListID,
DDControlName = DDcontrolData.DDControlName,
name = DDcontrolData.ListName,
value = DDcontrolData.ListValue
};
return Json(jsonData.ToList());
}
The code works fine when I only have one drop down list. But I want populate more than one select drop down list with name function, for example when the page load, I want to load "select min price" "select max price".......couple of drop down list, what I tried is code like this:
<script type="text/javascript">
$(document).ready(function() {
//populate " select min price" drop down list
$.post("/Search/getDDListData/", { controlName: "MinPrice" }, function(data1) {
populateDropdown($("#minPriceList"), data1);
//populate " select max price" drop down list
$.post("/Search/getDDListData/", { controlName: "MaxPrice" }, function(data2) {
populateDropdown($("#maxPriceList"), data2);
});
}); function populateDropdown(select, data) { select.html(''); $.each(data, function(id, option) { select.append($('').val(option.value).html(option.name)); }); }