ASP.NET MVC 2連接下拉列表

-1

我想知道，我如何使2連接下拉列表（而不是級聯）。點：ASP.NET MVC 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領域的第二位。因此，如果用戶將更改第1個下拉列表，則必須自動更改第2個下拉列表中的值，反之亦然。目標是讓他們都選擇相同的物品。

我不知道如何使它工作。它可以使用Html幫手嗎？或者我必須使用Javascript並將它們切換爲onchange？

來源

2017-02-22 rainbowShiningUnicorn

這將是一個Javascript解決方案。 Html幫助器對此沒有用處，因爲它們只是用來顯示信息，而不是監聽事件（如onchange）。 –

你有這個理由嗎？你可以簡單地設置標籤屬性來顯示兩個值？哪一個更符合語義上的正確性，因爲你確實只展示了一件你只是想展示兩個特性的東西？ – Milney

@Milney是的，OP可以設置label屬性來顯示兩個值，但是OP要求的是如果用戶決定更改下拉列表中的值，那麼第二個需要更改..反之亦然。至少這就是我從問題 –

我認爲，這是你想達到什麼樣的通過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。

希望這會有所幫助！

來源

2017-02-22 15:14:50

我的事這是很有幫助的..

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

來源

2017-02-22 15:13:43 levent

ASP.NET MVC 2連接下拉列表

回答

相關問題