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字段。因此，如果用户将更改第一个下拉列表，则必须自动更改第二个下拉列表中的值，反之亦然。我们的目标是让他们都选择相同的项目。

我不知道如何使其有效。它可以用Html帮助器制作，还是我必须使用Javascript并切换它们onchange？

Answer 1

我觉得这很有用..

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

Answer 2

我认为这是您尝试通过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。

希望这有帮助！

ASP.NET MVC 2连接下拉列表

2 个答案: