下拉填充与JSON结果 - 使用层叠MVC3，JQuery的，阿贾克斯，JSON下拉 [英] Populating dropdown with JSON result - Cascading DropDown using MVC3, JQuery, Ajax, JSON

问题描述

我有使用MVC层叠落淹死。喜欢的东西，如果你在第一下拉列表中选择一个国家，在第二个该国的国家应进行相应的填充。

目前，一切似乎很好，我得到JSON响应（看到它使用F12工具），它看起来像[{STATEID：01，Statename的：亚利桑那}，{ STATEID：02，Statename的：加州}，等等。]。

我想知道如何填充我的第二下拉与此数据。我的第二个下拉的ID为STATEID。任何帮助将大大AP preciated。

下面是code用于生产从服务器的JSON响应：

  [HttpPost]
公共JsonResult的getStates（字符串CountryID）
{
    使用（MDB）
    {
        在mdb.GetStates得自q VAR statesResults =（CountryID）
                        选择新Models.StatesDTO
                        {
                            STATEID = q.StateID，
                            Statename的= q.StateName
                        };        locations.statesList = stateResults.ToList（）;
    }    JsonResult结果=新JsonResult（）;    result.Data = locations.statesList;    返回结果;
}
 

下面是客户端的HTML，我razor- code和我的脚本。我想写里面的一些code成功。所以它填充与JSON数据下拉国

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（函数（）{
        $（＃选择CountryID）。变更（功能（EVT）{            如果（$（＃选择CountryID）。VAL（）！=1）{                $阿贾克斯（{
                    网址：/首页/的getStates
                    输入：POST，
                    数据：{CountryID：$（＃选择CountryID）VAL（）}，
                    成功：函数（）{警报（数据恢复成功）; }，
                    错误：功能（XHR）{警报（有什么不对劲）; }
                }）;
            }
        }）;
    }）;
＆LT; / SCRIPT＆GT;
 

解决方案

首先，一个jQuery事件处理函数中这个指的是触发事件的元素，所以你可以替换为 $额外调用（选择＃CountryID）与 $（本）。虽然在可能的情况，你应该直接访问元素属性，而不是使用jQuery的功能，让你可以简单地做 THIS.VALUE ，而不是 $（本） .VAL（）或 $（＃选择CountryID）。VAL（）。

然后，里面的AJAX调用成功功能，你需要创建一系列＆LT的;选项＆GT; 元素。可以使用基本的jQuery（）函数（或 $（）的简称）来完成。这将是这个样子：

  $。阿贾克斯（{
    成功：函数（州）{
        //状态是你的JSON数组
        变量$ =选择$（'＃STATEID'）;
        $。每个（州，功能（我，州）{
            $（'＆LT;选项＆GT;'，{
                值：state.stateId
            }）HTML（state.StateName）.appendTo（$选择）;
        }）;
    }
}）;
 

下面是一个的jsfiddle演示。

相关jQuery的文档：

• jQuery.each（）


• 的jQuery（）

I've got a cascading drop-drown using mvc. Something like, if you select a country in the first-dropdown, the states of that country in the second one should be populated accordingly.

At the moment, all seems fine and I'm getting Json response (saw it using F12 tools), and it looks something like [{ "stateId":"01", "StateName": "arizona" } , { "stateId" : "02", "StateName":"California" }, etc..] ..

I'd like to know how to populate my second-dropdown with this data. My second drop-down's id is "StateID". Any help would be greatly appreciated.

Below is the code used to produce the JSON Response from the server:

[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;
}

Below is the client-side HTML, my razor-code and my script. I want to write some code inside "success:" so that it populates the States dropdown with the JSON data.

<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> 

解决方案

To begin with, inside a jQuery event handler function this refers to the element that triggered the event, so you can replace the additional calls to $("select#CountryID") with $(this). Though where possible you should access element properties directly, rather than using the jQuery functions, so you could simply do this.value rather than $(this).val() or $("select#CountryID").val().

Then, inside your AJAX calls success function, you need to create a series of <option> elements. That can be done using the base jQuery() function (or $() for short). That would look something like this:

$.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);
        });
    }
});

Here's a jsFiddle demo.

Relevant jQuery docs:

• jQuery.each()
• jQuery()

这篇关于下拉填充与JSON结果 - 使用层叠MVC3，JQuery的，阿贾克斯，JSON下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！