Html MVC（5）基于另一个列表填充下拉列表

我知道我可以用

SelectedListItem>

和

@Html.DropDownList（“someID”）

和操作系统的列表制作一个下拉列表

我的问题是，如果您有两个下拉列表，而第二个下拉列表取决于第一个下拉列表中选定的项目，该怎么办

如何填充它？用JS？你会怎么做？

---

您是否会更改“使用另一个列表填充”，更改整个下拉列表，或者为每个下拉列表组合创建一个partialview，因此需要使用正确的下拉列表进行替换。

我添加了NetFiddle示例。工作

我建议使用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>

选择1
选择2
选择3
第二

//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>")
            }

    })    
}

$（“#事件ID”）。在（“更改”，函数（）上{
showValue（$（this.val（））；
})
函数showValue（val）
{
控制台日志（val）；
$.getJSON（'@Url.Action（“GetDropdownList”，“Home”）'+“？value=“+val，函数（结果）{
$（“#SecondDropdown”）.html（“”；//在填充过程之前使select为空
var数据=结果数据；
对于（变量i=0；i

//控制器

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

}

[HttpGet]
公共JsonResult GetDropdownList（int？值）
{
列出您的数据=新建列表（）；
如果（值==2）
{
添加（“选项2a”）；
添加（“选项2B”）；
添加（“选项2C”）；
返回Json（new{data=yourdata}，JsonRequestBehavior.AllowGet）；
}
其他的
{
返回Json（新的{data=”“}，JsonRequestBehavior.AllowGet）；
}           
}

以下是基本思路。。在更改第一个下拉菜单时，将触发一个Jquery函数，该函数对服务器执行AJAX调用，根据所选值获取记录并构建第二个下拉菜单。因此，当第一个下拉列表中出现更改时，该过程将重复。您可以将仅带有选项标记的部分视图返回到Ajax调用。在ajax成功的过程中，您需要将其附加到相应的

标记中。。或者，如果您不想返回部分视图，您可以返回JSON，然后循环值并生成一个

标记并将其附加到dropdownSomething中，就像这样，对于手动使用JS填充，我猜：$（“#国家”）.change（function（）{$.getJSON（“/Home/States/List/”+$（“#国家>选项：selected”）.attr（“value”），函数（数据）{var items=“--------------”；$.each（数据，函数（i，state）{items+=''+state.Text+''；}）；$（“#States”）.html（items）；}）；这正是你需要的：）我很好。。。无论如何，这里有很多相似的答案。。快乐的编码兄弟..像一个冠军兄弟一样工作我很高兴听到：）我发现很多愚蠢的答案比这个答案获得更多的选票真的很有趣。。。不管怎样，@hsnbl你的方法太棒了……@AhashanAlamSojib谢谢你的赞美：）