我有一个级联的drop-drown使用mvc.如果您在第一个下拉列表中选择一个国家/地区,那么第二个国家/地区的状态应该相应地填充.
目前,似乎都很好,我正在收到Json的回应(看到它使用F12工具),它看起来像[{“stateId”：“01”,“StateName”：“arizona”},{“stateId” ：“02”,“州名”：“加州”}等..]
我想知道如何使用这些数据填充我的第二个下拉列表.我的第二个下拉列表的ID是“StateID”.任何帮助将不胜感激.
[HttpPost]
public JsonResult GetStates(string CountryID)
{
using (mdb)
{
var statesResults = from q in mdb.GetStates(CountryID)
select new Models.StatesDTO
{
StateID = q.StateID,StateName = q.StateName
};
locations.statesList = stateResults.ToList();
}
JsonResult result = new JsonResult();
result.Data = locations.statesList;
return result;
}
以下是客户端HTML,我的剃刀代码和我的脚本.我想在“成功：”中写入一些代码,以便使用JSON数据填充国家下拉列表.
<script type="text/javascript">
$(function () {
$("select#CountryID").change(function (evt) {
if ($("select#CountryID").val() != "-1") {
$.ajax({
url: "/Home/GetStates",type: 'POST',data: { CountryID: $("select#CountryID").val() },success: function () { alert("Data retrieval successful"); },error: function (xhr) { alert("Something seems Wrong"); }
});
}
});
});
</script>
解决方法
首先,在jQuery事件处理函数内部,这是指触发事件的元素,因此您可以用$(this)替换$(“select#CountryID”)的其他调用.尽管在可能的情况下,您应该直接访问元素属性,而不是使用jQuery函数,因此您可以简单地执行this.value而不是$(this).val()或$(“select#CountryID”).val().
然后,在AJAX调用成功函数的内部,您需要创建一系列< option>元素.这可以使用基本的jQuery()函数(或简称为$())来完成.这样会看起来像这样：
$.ajax({
success: function(states) {
// states is your JSON array
var $select = $('#StateID');
$.each(states,function(i,state) {
$('<option>',{
value: state.stateId
}).html(state.StateName).appendTo($select);
});
}
});
这是一个jsFiddle demo.
相关的jQuery文档：
