Ajax调用来填充选择列表当另一个选择列表中的变化 [英] Ajax call to populate select list when another select list changes
问题描述
从<一个继href=\"http://stackoverflow.com/questions/16897146/bind-drop-down-list-using-jquery-ajax-on-change-of-first-ddl\">this帖子，我试图填充的选择列表'城市'如果'国家'的变化另一个选择列表中。我跟着相同的方法链接的职位和简介如下实施达林的建议为成功（）。它的伟大工程最的时间（这是非常奇怪）。我的意思是，我的所有的'国家'的，90％的变化事件的返回选择列表项目（S）对象（S），其他10％的回报一个字符串值。为什么会发生变化？它要么工作或不...
查看
＆LT;！ - 国家 - ＆GT;
＆LT; DIV CLASS =表单组COL-MD-3＆GT;
＆LT;标签类=控制标签＆GT;城市＆LT; /标签＆gt;
＆LT; BR /＆GT;
＆LT;选择一个id =国家名称=国家级=表格控＆GT;
＆LT;期权价值=＆GT;从模式的国家名单...＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT;！ - 市 - ＆GT;
＆LT; DIV CLASS =表单组COL-MD-3＆GT;
＆LT;标签类=控制标签＆GT;城市＆LT; /标签＆gt;
＆LT; BR /＆GT;
＆LT;选择ID =城NAME =城市CLASS =表格控＆GT;
＆LT;期权价值=＆GT;首先选择国家...＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT;！ - 里面我的脚本 - ＆GT;
＆LT;脚本＆GT;
$（'＃国家'）。改变（函数（）{
VAR了selectedValue = $（本）.VAL（）;
$阿贾克斯（{
网址：'@ Url.Action（CityDropDownList，家），
键入：GET，
数据：{国家：}了selectedValue，
成功：函数（结果）{ VAR cityDropDownList = $（'＃城市'）;
cityDropDownList.empty（）;
$。每个（结果，函数（）{
cityDropDownList.append（
$（'＆LT;选项/＆GT;'，{
值：THIS.VALUE，
文本：this.Text
}）
）;
}）;
}
}）;
}）;
＆LT; / SCRIPT＆GT;
控制器
公共JsonResult CityDropDownList（字符串国家）
{
VAR的结果=（从C在db.PageStats
其中，c.Country.Equals（国家）
排序依据c.City
选择c.City）.ToList（）是不同的（）。 x.Country.Equals（国家））排序依据（X =＆GT;。x.City）。选择（X =＆GT; x.City）.Distinct（）了ToList（//db.PageStats.Where(x =过夜。 ）; 清单＆LT; SelectListItem＆GT;城市=新的List＆LT; SelectListItem＆GT;（）; 的foreach（在结果VAR项）
{
SelectListItem城市=新SelectListItem
{
文=项，
值=项目
};
cities.Add（市）;
}
返回JSON（cityList，JsonRequestBehavior.AllowGet）;
}
解决
$（'＃国家'）。改变（函数（）{
VAR了selectedValue = $（本）.VAL（）;
$获得（{
网址：'@ Url.Action（CityDropDownList，家），
数据：{国家：}了selectedValue， 成功：函数（结果）{ 警报（结果）;
VAR城市= $（'＃城市'）;
cities.empty（）; $。每个（结果，函数（）{ cities.append（
$（'＆LT;选项＆GT;'，{
值：THIS.VALUE
}）文本（this.Text）
）;
}）;
}
}）;
}）;
Following on from this post, I'm attempting to populate a select list of 'cities' when another select list of 'countries' changes. I followed the same approach as the linked post and as outlined below implementing Darin's suggestion for the success(). It works great 'most' of the time (which is really odd). What I mean is, out of all my 'countries', 90% of the change events return the select list item(s) object(s), the other 10% return a single string value. Why would it vary? It should either work or not...
View
<!--Country-->
<div class="form-group col-md-3">
<label class="control-label ">City </label>
<br />
<select id="Country" name="Country" class="form-control">
<option value="">List of countries from Model...</option>
</select>
</div>
<!--City-->
<div class="form-group col-md-3">
<label class="control-label ">City </label>
<br />
<select id="City" name="City" class="form-control">
<option value="">Select a country first...</option>
</select>
</div>
<!--Inside my script -->
<script>
$('#Country').change(function () {
var selectedValue = $(this).val();
$.ajax({
url: '@Url.Action("CityDropDownList", "Home")',
type: "GET",
data: { country: selectedValue },
success: function (result) {
var cityDropDownList = $('#City');
cityDropDownList.empty();
$.each(result, function () {
cityDropDownList.append(
$('<option/>', {
value: this.Value,
text: this.Text
})
);
});
}
});
});
</script>
Controller
public JsonResult CityDropDownList(string country)
{
var results = (from c in db.PageStats
where c.Country.Equals(country)
orderby c.City
select c.City).ToList().Distinct();
//db.PageStats.Where(x => x.Country.Equals(country)).OrderBy(x => x.City).Select(x => x.City).Distinct().ToList();
List<SelectListItem> cities = new List<SelectListItem>();
foreach(var item in results)
{
SelectListItem city = new SelectListItem
{
Text = item,
Value = item
};
cities.Add(city);
}
return Json(cityList, JsonRequestBehavior.AllowGet);
}
SOLVED
$('#Country').change(function () {
var selectedValue = $(this).val();
$.get({
url: '@Url.Action("CityDropDownList", "Home")',
data: { country: selectedValue },
success: function (result) {
alert(result);
var cities = $('#City');
cities.empty();
$.each(result, function () {
cities.append(
$('<option>', {
value: this.Value
}).text(this.Text)
);
});
}
});
});
这篇关于Ajax调用来填充选择列表当另一个选择列表中的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
