Question

我的视图中有3个下拉列表，每个ddl中都有相同的元素。我为每个ddl使用了单独的视图，尽管元素是相同的。在我努力奋斗的地方，我想通过选择特定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" />


    }

Answer 1

您可以使用jquery隐藏（或禁用）其他<select>中的选项，以防止选择重复项。然后给出一个类名（比如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();
            }
        });
    });
});

请参阅this fiddle以获取示例

Answer 2

如果通过按下按钮动态生成 DropDownLists 怎么样？在我的情况下，如果我有现有的DropDownLists

，这是有效的

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

我的观点

<div class="form-group" id="parameterTemplate">
<div class="col-sm-3 nopadding">
    <div class="form-group">
        <label for="fullname">Parameter Code</label>
        @Html.DropDownListFor(model => model.paramCode, ViewBag.AllParameters as IEnumerable<SelectListItem>,"", htmlAttributes: new { @class = "form-control denyduplicate" })
    </div>
</div>

和你的java脚本代码如下

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

限制为多个下拉列表mvc5选择相同的项目

2 个答案: