我有一个级联的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>
@R_403_323@
首先,在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文档：
