如果其他条件在 MVC 上的下拉列表中

Question

我的 Web 应用程序上有两个下拉列表。两个下拉列表的填充数据来自数据库。它们包含相同的数据。

我想要的是，如果在第一个下拉列表中选择了其中一个列表，则它不应再在第二个下拉列表中可用。

我有以下剃刀语法：

@Html.DropDownListFor(model => model.Questions1, (SelectList)ViewData["Questions"], "Select>>", new { id = "Questions1", Name = "Questions1"})

@Html.DropDownListFor(model => model.Questions2, (SelectList)ViewData["Questions"], "Select>>", new { id = "Questions2", Name = "Questions2"})

问题来自从数据库中检索的模型。

提前致谢！

Answer 1

不确定是否有更巧妙的方法来做到这一点，但这是我想出的。

1. 克隆 option 元素
2. 添加更改监听器
3. 在 #2 中重新创建选项
4. 从#2中删除#1中选中的那个

---

// save all options locally
var options = $("#Question2 option").clone();

function removeItem() {
    // clear and re-populate all options
    $("#Question2 option").remove();
    $("#Question2").append(options);

    // get the selected option in #1 and remove from #2
    var selected = $("#Question1 :selected").val();
    $("#Question2 option[value='" + selected + "']").remove();
}

// update #2 on startup, and on change
$("#Question1").on("change", removeItem);
removeItem();

Fiddle

Answer 2

为了实现这一点，您需要将选项池存储在 javascript 对象中。然后，在每个下拉列表的“onchange”事件中，重新构建另一个下拉列表中的选项，不包括所选的选项。这是一个使用 jQuery 的示例：

// Build a javascript array with all of the select names/values
var options = new Array();
$('#Questions1 option').each(function() {
    $this = $(this);
    options.push({ Name: $this.text(), Value: $this.val() });
});

// Create a function for re-building a select minus the chosen option
var rebuildSelect = function($selOption, $select) {
    $previouslySelected = $select.find(':selected');
    $select.empty();
    for (var i = 0; i < options.length; i++) {
        var opt = options[i];
        if (opt.Value != $selOption.val()) {
            if ($previouslySelected.val() == opt.Value) {
                $select.append('<option value="' + opt.Value + '" selected="selected">' + opt.Name + '</option>');
            }
            else {
                $select.append('<option value="' + opt.Value + '">' + opt.Name + '</option>');
            }
        }
    }
}

// Wire up the event handlers
var $Questions1 = $('#Questions1');
var $Questions2 = $('#Questions2');

$Questions1.change(function() {
    rebuildSelect($(this), $Questions2);
});

$Questions2.change(function() {
    rebuildSelect($(this), $Questions1);
});

// Go ahead and run the function on each box to remove the default entries from the other box
rebuildSelect($Questions1.find(':selected'), $Questions2);
rebuildSelect($Questions2.find(':selected'), $Questions1);

http://jsfiddle.net/n5k99/

Answer 3

你可以使用 Jquery 函数

所以如果你有 2 个下拉菜单

<select id="dd1" style="width:200px;">
              <option value="feedback" name="aft_qst">After Quest</option>
              <option value="feedback" name="aft_exm">After Exam</option>
              </select>



<select id="dd2" style="width:200px;">
              <option value="feedback" name="aft_qst">After Quest</option>
              <option value="feedback" name="aft_exm">After Exam</option>
              </select>

然后添加这个 jQuery

$("#dd1").change(function(){
        $("#dd2").prop("disabled", true);
});

看这里：http://jsfiddle.net/tft4t/186/

Answer 4

这不是直接的答案，而是更多的选择；

为什么不将这两个选项都保留在下拉列表中，让用户选择同一个项目，当他们这样做时，显示“请选择两个不同的项目”等消息？您的代码也应该更简单。

如果我是用户，无论出于何种原因，我想选择两次相同的东西，我想我宁愿系统让我这样做，然后告诉我我做错了，而不是尝试选择同样的东西两次，在第二个下拉菜单中发现我想要的项目丢失了，让我有片刻的恐慌。