他のドロップダウンで選択した値に応じてドロップダウンを表示します。

Question

MVCアプリケーションを初めて使用しています。自分のページにドロップダウンを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> 

以下のように見える1.

ドロップダウンリストから選択した値に応じて、ドロップダウン2またはドロップダウン3を表示する必要がある今ではすべてを示し、さらに2つのドロップダウン2 & 3を作成しました3つのドロップダウンが表示されますが、車が車として選択されている場合は、車のドロップダウンリストを表示します。どうやってやるの。

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> 

最初のドロップダウンで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(); 
     } 
    } 
});