根据在其他下拉列表中选择的值显示下拉列表

Question

我是 MVC 应用程序的新手，我试图在我的页面中添加一个下拉列表 1，它工作正常。现在我又创建了两个下拉菜单 2 和 3，需要根据从下拉菜单 1 中选择的值显示下拉菜单 2 或下拉菜单 3。

cshtml 如下所示

  <div>
    @{
       List<SelectListItem> listItems = new List<SelectListItem>();
       listItems.Add(new SelectListItem
       {
        Text = "Car",
        Value = "Car"
       });
       listItems.Add(new SelectListItem
       {
       Text = "Bike",
       Value = "Bike",
       });
       }
       @Html.Label("Vehicle")
       @Html.DropDownList("VehicleType", listItems, new { @class = "form-control" })
      </div>
      <div>
      @Html.Label("Cars");
      @Html.DropDownListFor(m => m.CarsList, new SelectList(Model.CarsList, "Name", "Name"), "Select Car")

     @Html.Label("Bike");
     @Html.DropDownListFor(m => m.BikeList, new SelectList(Model.BikeList, "Barcode", "Name"), "Select Bike")
     </div>

现在它显示所有三个下拉列表，但如果车辆被选为汽车，我想显示 Cars 下拉列表。我该怎么做。

Answer 1

您可以使用Jquery change 事件隐藏页面加载和显示控件。

//Hiding the control on page load
$(function(){
    $('#CarsList').hide();
}

//Showing it on selected index.
$('#VehicleType').on('change', function() {
    if($('#dropDownId :selected').text() == "Car")
        $('#CarsList').show();
})

你可以对自行车做同样的事情。

Answer 2

我们 mvc 开发人员通常在客户端做这些事情。以下 jquery 脚本将全部完成

$("#VehicleType").change(function () {

                if ($(this).val() == "Car") {
                    $("#CarsList").show();
                    $("#BikeList").hide();
                }
                else {

                    $("#CarsList").hide();
                    $("#BikeList").show();
                }

            });

Answer 3

您可以使用javascript根据第一个下拉菜单的选择来隐藏和显示相应的下拉菜单。

由于您可能还想隐藏/显示相关标签，我建议将元素包装在容器 div 中。

<div id="car-selection">
   @Html.Label("Cars");
   @Html.DropDownListFor(m => m.CarsList, 
                new SelectList(Model.CarsList, "Name", "Name"), "Select Car")
</div>

<div id="bike-selection">
     @Html.Label("Bike");
     @Html.DropDownListFor(m => m.BikeList, 
             new SelectList(Model.BikeList, "Barcode", "Name"), "Select Bike")
</div>

现在在第一个下拉列表中监听 change 事件，并根据需要隐藏和显示容器 div。

$(function () {

    updateVisibility();  // Let's show the needed dropdown on page load as well

    $("#VehicleType").change(function () {
        updateVisibility();
    });

    function updateVisibility() {
        var v = $("#VehicleType").val();
        if (v === "Car") {
            $("#car-selection").show();
            $("#bike-selection").hide();
        }
        else if (v === "Bike") {
            $("#bike-selection").show();
            $("#car-selection").hide();
        }
    }
});