Question

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

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

我有以下剃刀语法：

@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

不确定是否有更明智的方法可以做到这一点，但这就是我想出来的。

克隆option元素
添加更改侦听器
在＃2
从＃2

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

这不是直接的答案，而是更多的替代方案;

为什么不在下拉列表中保留这两个选项并让用户选择相同的项目，当它们执行时，显示“请选择两个不同的项目”等消息？你的代码也应该更容易。

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

如果在MVC的下拉列表中有条件

4 个答案: