带有json数据的MVC4剃刀填充下拉列表

时间:2013-12-19 06:25:47

标签: c# jquery json asp.net-mvc-4

我有两个语言和国家/地区的下拉列表

在下拉列表中选择语言时,应填写国家/地区下拉列表中的相应国家/地区

 @Html.DropDownList("LanguageSelectList", null, null, new { @class = "hyper-select fixedwidth300"})
@Html.DropDownList("CountrySelectList", null, null, new { @class = "hyper-select fixedwidth300" })

这是我的jquery脚本

 $("#LanguageSelectList").change(function (event) {
            $("#languageValidator").hide();
            var selectedLanguage = $("#LanguageSelectList").val();
            debugger;
            //--------
            if (selectedLanguage!='') {
                var url = '@Url.Action("GetCountryListByLanguage", "Options")';
                $.ajax({
                    type: "POST",
                    url: url,
                    data: { selectedLanguage: selectedLanguage },
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    global: false,
                    async: false,
                    success: function (data) {

                        var ddlCountrylist = $("#CountrySelectList");
                        debugger;
                        var jsonString =JSON.stringify(data);  
                        //here how to take data from jsonstring to countries dropdownlist


                    }

                });

            } else {  
                alert('no country returnned');


            }

            //--------------

        });

我可以在json数据中检索预期的国家/地区列表,如下所示。现在我如何填写我的国家/地区下拉列表。

jsonString="[{\"Selected\":false,\"Text\":\"n/a\",\"Value\":\"\"},{\"Selected\":false,\"Text\":\"China\",\"Value\":\"CN\"},{\"Selected\":false,\"Text\":\"Hong Kong\",\"Value\":\"HK\"},{\"Selected\":false,\"Text\":\"Singapore\",\"Value\":\"SG\"},{\"Selected\":false,\"Text\":\"Taiwan\",\"Value\":\"TW\"}]"

2 个答案:

答案 0 :(得分:1)

在ajax调用控制器方法的成功部分,您可以编写以下代码:

success: function (data) {
$('#CountrySelectList').empty();
$.each(data.agent, function() {
    $('#CountrySelectList').append(
        $('<option/>', {
            value: this.Value,
            html: this.Text
        })
    );    
});

}

我还没有测试过上面的代码,但我希望这肯定有用

答案 1 :(得分:0)

成功处理程序内部的

只是通过返回的数组进行迭代,并为数组中的每个元素添加一个下拉列表选项。

ddlCountrylist.find('option').remove(); 
$(data).each(function(i,v){
     $('<option value='+v.Value+'>'+v.Text+'</option>').appendTo(ddlCountrylist);
    });