ASP.NET MVC 2接続のドロップダウンリスト

Question

私は2つの接続されたドロップダウン（カスケードではない）を作る方法を知りたいと思います。 ポイント：

私がリストを持っている：

List<SelectListItem> harmingFactorsList = new List<SelectListItem>(); 
using (var db = new MyEntities()) 
{ 
    foreach (var item in db.CatalogHarmingFactors) 
    { 
     harmingFactorsList.Add(new SelectListItem { Value = item.Nr, Text = item.Description}); 
    } 
} 

第一のドロップダウンはNrフィールドとDescriptionフィールドに対応する第二を示さなければなりません。したがって、ユーザーが最初のドロップダウンを変更する場合は、2番目のドロップダウンの値を自動的に変更する必要があります。目標は、それらのアイテムに同じ項目が選択されているようにすることです。

どのように動作させるかわかりません。それは、HTMLヘルパーで行うことができますか、または私はJavaScriptを使用して、それらを切り替える必要がありますonchange？私は、これはあなたが達成しようとしているものであると思い

Answer 1

Javascript経由で。あなたはこれをどのように編集することができますが、それは仕事を完了します。

簡単な例：

HTML：

<select id="FirstName"> 
    <option>-- Select --</option> 
    <option value="John">John</option> 
    <option value="Abraham">Abraham</option> 
    <option value="George">George</option> 
</select> 

<select id="LastName"> 
    <option>-- Select --</option> 
    <option value="Doe">Doe</option> 
    <option value="Lincoln">Lincoln</option> 
    <option value="Washington">Washington</option> 
</select> 

---

のJavaScript/jQueryの：

$("#FirstName").change(function(){ 
    if(this.value === "John"){ 
    $("#LastName").val("Doe") 
    }; 
    if(this.value === "Abraham"){ 
    $("#LastName").val("Lincoln") 
    }; 
    if(this.value === "George"){ 
    $("#LastName").val("Washington") 
    }; 
}); 

$("#LastName").change(function(){ 
    if(this.value === "Doe"){ 
    $("#FirstName").val("John") 
    }; 
    if(this.value === "Lincoln"){ 
    $("#FirstName").val("Abraham") 
    }; 
    if(this.value === "Washington"){ 
    $("#FirstName").val("George") 
    }; 
}); 

ここではJSFiddleです。

希望すると便利です。

Answer 2

私の事、この便利..

純粋なJavaスクリプト

<select id="drp1"> 
    <option value="val1">Text 1</option> 
    <option value="val2">Text 2</option> 
    <option value="val3">Text 3</option> 
    <option value="val4">Text 4</option> 
</select> 

<select id="drp2"> 
    <option value="val1">Text 1</option> 
    <option value="val2">Text 2</option> 
    <option value="val3">Text 3</option> 
    <option value="val4">Text 4</option> 
</select> 
<script type="text/javascript"> 
    var drp1 = document.getElementById("drp1"); 
    var drp2 = document.getElementById("drp2"); 
    drp1.onchange = function() { 
     fixValues(drp1, drp2); 
    }; 
    drp2.onchange = function() { 
     fixValues(drp2, drp1); 
    } 

    var fixValues = function (drpFrom, drpTo) { 
     var val = drpFrom.options[drpFrom.selectedIndex].value; 
     for (i = 0; i < drpTo.options.length; i++) { 
      if (val == drpTo.options[i].value) { 
       drpTo.selectedIndex = i; 
      } 
     } 
    } 
</script> 

jqyery

<select id="drp3"> 
    <option value="val1">Text 1</option> 
    <option value="val2">Text 2</option> 
    <option value="val3">Text 3</option> 
    <option value="val4">Text 4</option> 
</select> 

<select id="drp4"> 
    <option value="val1">Text 1</option> 
    <option value="val2">Text 2</option> 
    <option value="val3">Text 3</option> 
    <option value="val4">Text 4</option> 
</select> 
<script type="text/javascript"> 

    $(function() { 
     $("#drp3").change(function() { 
      $("#drp4").val($(this).val()); 
     }) 

     $("#drp4").change(function() { 
      $("#drp3").val($(this).val()); 
     }) 
    }); 

</script>