2

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

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

提前致谢！

4

4 回答 4

2

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

  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();

小提琴

于 2013-07-24T03:02:31.613 回答
1

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

于 2013-07-24T03:43:23.607 回答
0

您可以使用 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/

于 2013-07-24T03:17:03.780 回答
0

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

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

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

于 2013-07-25T03:22:29.333 回答