根据另一个下拉列表中的选择填充下拉列表

Fill a drop down list based on selection in another drop down list

本文关键字：下拉列表 选择 填充 另一个      更新时间：2023-09-26

我正在使用Razor和c#在asp.net MVC 3网站上工作。

我在一个视图上有两个下拉列表-一个用于设备类型，一个用于设备模型。"设备型号"下拉列表的内容基于所选的"设备类型"。此外，在选择设备类型之前，应该禁用设备模型下拉。我希望功能是客户端。

我怎样才能做到这一点?

编辑:收到不同问题的答案:使用Javascript/jQuery动态填充下拉列表

为什么不将第二个dd列表放在容器div中，使用Ajax将从第一个列表中选择的值发送到控制器操作(onchange)，该操作将呈现的部分作为HTML返回给客户端，然后用操作结果替换第二个列表容器的HTML。

如果您愿意使用jquery，请查看$。和replaceWith来与你的控制器动作对话，并分别动态重写你的目标div html

如果没有很多组合，那么您也可以简单地将整个字典以JavaScript变量的形式传递给客户端，然后根据需要在客户端完成整个操作。

的例子:

在控制器中，你会像这样将字典存储在ViewBag中:

// Keep in mind that I don't know your data structure, but you'll get the point.
ViewBag.DeviceDictionary = myDictionary;

然后在视图中，你可以这样做:

<script type="text/javascript">
// new-up an array in JavaScript.
var devices = [];
// ... IT'S RAZOR TIME!!!
@foreach (Device d in ViewBag.DeviceDictionary)
{
    <text>
        // We're back in JavaScript here... new up the dictionary.
        devices[@d.ID] = [];
    </text>
    foreach (var model in d.Models
    {
        <text>devices[@d.ID].push("@model.Name");</text>
    }
}
</script>

然后，您只需编写一些简单的JavaScript(使用jQuery?)来清除第二个下拉列表并从该数组(这是客户端)填充它。

请记住，我给你一个的例子完全构成你的数据结构…但是你应该从这里得到一个想法

相关文章：