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

本文关键字：MVC 下拉列表 其他 条件 如果 | 更新日期: 2023-09-27 18:24:29

我的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"})

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

提前感谢！

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

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

  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

为了实现这一点，您需要将选项池存储在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/

您可以使用Jquery函数

所以如果你有两个下降

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

这不是一个直接的答案，而是一个替代方案；

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

如果我是一个用户，无论出于何种原因，我想选择两次相同的东西，我宁愿系统让我这样做，然后告诉我我做错了，也不愿尝试选择两次同一件东西，然后在第二个下拉列表中发现我想要的项目不见了，这会让我感到恐慌。

相关文章：