Jquery 限制为多个下拉列表mvc5选择同一项

我的视图中有3个dropdownlists，每个ddl中都有相同的元素。虽然元素是相同的，但我为每个ddl使用了单独的viewbags。我在挣扎的地方是，我想通过在一个特定的ddl中选择一个元素来限制用户，这个元素已经被他在另一个ddl中选择了。下面是我的局部视图。如何做到这一点？提前谢谢

@using (Html.BeginForm("Save", "ItemTemplate"))
    {

         <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Attribute 01</b> <b style=" color:#ff0000;">*</b></div>
        <div class="col-md-6">
            @Html.DropDownListFor(a => a.Atribute1, new SelectList(ViewBag.AtList1, "AtributeId", "AtributeName"), " Select a Attribute", new { id="dd", Class = "form-control", title = "priority", style = "width:175px;height:30px; margin-top:6px;" })
            @Html.ValidationMessageFor(a => a.Atribute1)
        </div>
        <div class="col-md-6"></div>    <div class="col-md-6"></div>

        <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Attribute 02</b> <b style=" color:#ff0000;">*</b></div>
<div class="col-md-6">
    @Html.DropDownListFor(a => a.Atribute2, new SelectList(ViewBag.AtList2, "AtributeId", "AtributeName"), " Select a Attribute", new { id = "dd", Class = "form-control", title = "priority", style = "width:175px;height:30px; margin-top:6px;" })
    @Html.ValidationMessageFor(a => a.Atribute2)
</div>
<div class="col-md-6"></div>    <div class="col-md-6"></div>


        <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Attribute 03</b> <b style=" color:#ff0000;">*</b></div>
<div class="col-md-6">
    @Html.DropDownListFor(a => a.Atribute3, new SelectList(ViewBag.AtList3, "AtributeId", "AtributeName"), " Select a Attribute", new { id = "dd", Class = "form-control", title = "priority", style = "width:175px;height:30px; margin-top:6px;" })
    @Html.ValidationMessageFor(a => a.Atribute3)
</div>
<div class="col-md-6"></div>    <div class="col-md-6"></div>

            <input type="submit" value="Save" id="btn" class="btn btn-success" />


    }

使用（Html.BeginForm（“保存”、“项目模板”）） { 属性01* @Html.DropDownListFor（a=>a.Atribute1，新建选择列表（ViewBag.AtList1，“AtributeId”，“AtributeName”），“选择属性”，新建{id=“dd”，Class=“form control”，title=“priority”，style=“宽度：175px；高度：30px；页边距顶部：6px；” @Html.ValidationMessageFor（a=>a.Atribute1） 属性02* @Html.DropDownListFor（a=>a.Atribute2，新选择列表（ViewBag.AtList2，“AtributeId”，“AtributeName”），“选择属性”，新{id=“dd”，Class=“form control”，title=“priority”，style=“宽度：175px；高度：30px；页边距顶部：6px；” @Html.ValidationMessageFor（a=>a.Atribute2） 属性03* @Html.DropDownListFor（a=>a.Atribute3，新的选择列表（ViewBag.AtList3，“AtributeId”，“AtributeName”），“选择属性”，新的{id=“dd”，Class=“form control”，title=“priority”，style=“宽度：175px；高度：30px；页边距顶部：6px；” @Html.ValidationMessageFor（a=>a.Atribute3） }

---

您可以使用jquery隐藏（或禁用）其他

中的选项，以防止选择重复项。然后给出一个类名（比如

class=“dd”

），并使用以下脚本

var selects = $('.dd');
selects.change(function() {
    // build array of selected option indexes
    var indexes = [];
    $.each(selects, function() {
        indexes.push($(this).children('option:selected').index());
    });
    $.each(selects, function() {
        // get the current selected option index
        var selected = $(this).children('option:selected').index();
        // enable/disable options
        $.each($(this).children('option'), function(index, item) {
            if ($(this).val() && indexes.indexOf(index) > -1 && index != selected) {
                $(this).prop('disabled', true); // or $(this).hide();
            } else {
                $(this).prop('disabled', false); // or $(this).show();
            }
        });
    });
});

---

请参阅示例

您可以使用jquery隐藏（或禁用）其他

中的选项，以防止选择重复项。然后给出一个类名（比如

class=“dd”

），并使用以下脚本

var selects = $('.dd');
selects.change(function() {
    // build array of selected option indexes
    var indexes = [];
    $.each(selects, function() {
        indexes.push($(this).children('option:selected').index());
    });
    $.each(selects, function() {
        // get the current selected option index
        var selected = $(this).children('option:selected').index();
        // enable/disable options
        $.each($(this).children('option'), function(index, item) {
            if ($(this).val() && indexes.indexOf(index) > -1 && index != selected) {
                $(this).prop('disabled', true); // or $(this).hide();
            } else {
                $(this).prop('disabled', false); // or $(this).show();
            }
        });
    });
});

---

请参阅示例

您可以使用jquery隐藏（或禁用）其他

中的选项，以防止选择重复项。然后给出一个类名（比如

class=“dd”

），并使用以下脚本

var selects = $('.dd');
selects.change(function() {
    // build array of selected option indexes
    var indexes = [];
    $.each(selects, function() {
        indexes.push($(this).children('option:selected').index());
    });
    $.each(selects, function() {
        // get the current selected option index
        var selected = $(this).children('option:selected').index();
        // enable/disable options
        $.each($(this).children('option'), function(index, item) {
            if ($(this).val() && indexes.indexOf(index) > -1 && index != selected) {
                $(this).prop('disabled', true); // or $(this).hide();
            } else {
                $(this).prop('disabled', false); // or $(this).show();
            }
        });
    });
});

---

请参阅示例

您可以使用jquery隐藏（或禁用）其他

中的选项，以防止选择重复项。然后给出一个类名（比如

class=“dd”

），并使用以下脚本

var selects = $('.dd');
selects.change(function() {
    // build array of selected option indexes
    var indexes = [];
    $.each(selects, function() {
        indexes.push($(this).children('option:selected').index());
    });
    $.each(selects, function() {
        // get the current selected option index
        var selected = $(this).children('option:selected').index();
        // enable/disable options
        $.each($(this).children('option'), function(index, item) {
            if ($(this).val() && indexes.indexOf(index) > -1 && index != selected) {
                $(this).prop('disabled', true); // or $(this).hide();
            } else {
                $(this).prop('disabled', false); // or $(this).show();
            }
        });
    });
});

---

请参阅示例

如果按下按钮动态生成下拉列表如何？ 在我的例子中，如果我有现有的DropDownLists，这就行了

每次用户按下+按钮时，我都会动态生成下面的html。但您的代码似乎不起作用

我的看法

---

如果按下按钮动态生成下拉列表如何？ 在我的例子中，如果我有现有的DropDownLists，这就行了

每次用户按下+按钮时，我都会动态生成下面的html。但您的代码似乎不起作用

我的看法

---

如果按下按钮动态生成下拉列表如何？ 在我的例子中，如果我有现有的DropDownLists，这就行了

每次用户按下+按钮时，我都会动态生成下面的html。但您的代码似乎不起作用

我的看法

---

如果按下按钮动态生成下拉列表如何？ 在我的例子中，如果我有现有的DropDownLists，这就行了

每次用户按下+按钮时，我都会动态生成下面的html。但您的代码似乎不起作用

我的看法

---

您需要使用javascript/jquery来处理每个下拉列表

.change（）

事件，并在其他下拉列表中隐藏相应的选项。另一个选项是使用自定义的

[NotEqualTo]

属性，以便在有重复选择时显示错误。@Stephen Muecke，谢谢...）我试着用javascript来做。但是我没有开发出正确的javascript。你能给我两种选择的例子吗？看一看，让我知道这是否是你想要的（这还不完全正确，但应该给你一个想法）@Stephen Muecke，是的，这正是我想要的。谢谢。我会尝试一下，并让您知道结果：）您有问题，然后返回并重新选择另一个选项，但我会稍后修复该问题并发布答案。您需要使用javascript/jquery处理每个下拉列表

.change（）

事件，并在其他下拉列表中隐藏相应的选项。另一个选项是使用自定义的

[NotEqualTo]

属性，以便在有重复选择时显示错误。@Stephen Muecke，谢谢...）我试着用javascript来做。但是我没有开发出正确的javascript。你能给我两种选择的例子吗？看一看，让我知道这是否是你想要的（这还不完全正确，但应该给你一个想法）@Stephen Muecke，是的，这正是我想要的。谢谢。我会尝试一下，并让您知道结果：）您有问题，然后返回并重新选择另一个选项，但我会稍后修复该问题并发布答案。您需要使用javascript/jquery处理每个下拉列表

.change（）

事件，并在其他下拉列表中隐藏相应的选项。另一个选项是使用自定义的

[NotEqualTo]

属性，以便在有重复选择时显示错误。@Stephen Muecke，谢谢...）我试着用javascript来做。但是我没有开发出正确的javascript。你能给我两种选择的例子吗？看一看，让我知道这是否是你想要的（这还不完全正确，但应该给你一个想法）@Stephen Muecke，是的，这正是我想要的。谢谢。我会尝试一下，并让你知道结果：）你有一个问题，然后返回并重新选择另一个选项，但我没有