Question

我是MVC应用程序的新手，试图在我的页面中添加一个下拉列表，它运行正常。现在我创建了两个下拉列表2＆amp; 3，需要显示下拉列表2或下拉列表3，具体取决于下拉列表1中的选定值。

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>

现在它显示了所有三个下拉列表，但是如果选择车辆作为汽车，我想显示汽车下拉列表。我怎么能这样做。

Answer 1

您可以在页面加载时隐藏控件并使用Jquery更改事件进行显示。

//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>

现在在第一个下拉列表中收听更改事件并隐藏并根据需要显示容器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();
        }
    }
});

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

3 个答案: