根據在其他下拉列表中選擇的值顯示一個下拉列表

Question

我是新來的MVC應用程序試圖添加下拉1到我的網頁，它工作正常。現在我創建了兩個更多的下拉列表2 & 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 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(); 
     } 
    } 
});