MVC(5)根据另一个填充下拉列表

时间:2017-06-30 13:22:50

标签: html asp.net-mvc asp.net-mvc-5 html.dropdownlistfor

我知道我可以使用SelectedListItem>@Html.DropDownList("someID")以及os的列表进行下拉列表。

我的问题是,如果您有2个下拉菜单,第二个下拉菜单取决于第一个下拉列表中的所选项目怎么办?

你如何填充它?用JS?你会怎么做? 您是否可以使用其他列表更改填充,更改整个下拉列表或者为每个下拉组合设置部分视图,因此需要使用正确的下拉列表进行替换。

1 个答案:

答案 0 :(得分:4)

我添加了NetFiddle示例。作品here

我建议使用jquery $.getJson()来填充第二个下拉列表而不刷新页面。您可以实现如下示例。

<强> // HTML

<select id="EventId" name="eventId">
    <option value="1">option1</option>
    <option value="2">option2</option>
    <option value="3">option3</option>
</select>

<label>Second</label>
<select id="SecondDropdown">  
</select>

// jquery

$("#EventId").on("change", function(){
    showValue($(this).val());
})

function showValue(val)
{
    console.log(val);               
    $.getJSON('@Url.Action("GetDropdownList", "Home")' + "?value=" + val, function (result) {                       
            $("#SecondDropdown").html(""); // makes select null before filling process
            var data = result.data;
            for (var i = 0; i < data.length; i++) {
                $("#SecondDropdown").append("<option>"+ data[i] +"</option>")
            }

    })    
}

<强> //控制器

[HttpGet]
public JsonResult GetDropdownList(int? value)
{
    List<string> yourdata = new List<string>();

    if(value == 2)
    {
        yourdata.Add("option2a");
        yourdata.Add("option2b");
        yourdata.Add("option2c");
        return Json(new { data = yourdata}, JsonRequestBehavior.AllowGet);
    }
    else
    {
        return Json(new { data = ""}, JsonRequestBehavior.AllowGet);
    }           

}