2

我的 Web 应用程序中有 2 个相同的下拉列表，其中包含相同的值。实际上，这些下拉列表用于帐号。
我想避免从这些列表中选择两个相同的项目。
例如，如果用户从第一个下拉列表中选择项目 #1，则项目 #1 必须对第二个隐藏（如果该项目不是第一个 - 索引 #0）。此外，如果用户将他选择的项目更改为#2，则第二个下拉列表中的#1 必须可见。

我写了一些东西，但效果不好：

$('#d1').change(function(e) {
    index = $(this).prop('selectedIndex');
    if (index != 0) $('#d2 option:eq(' + index + ')').css('display','none');
});

看这里。

我想我只需要一种在隐藏所选项目之前使所有项目可见的方法。

4

3 回答 3

3

采用.siblings()

$('#d1').change(function(e) {
    index = $(this).prop('selectedIndex');
  $('#d2 option:eq(' + index + ')').css('display','none').siblings().css('display','block');
});

​

这是一个演示http://jsfiddle.net/QTDXt/10/

于 2012-12-18T14:43:44.600 回答
2

您可能无法隐藏特定选项。（我不能在 Chrome 中做到这一点。）尝试禁用该选项：

$('#d1').change(function(e) {
    index = this.selectedIndex;
    $('#d2 option').prop('disabled', false); // enable all options
    if (index != 0) {
        $('#d2').get(0).selectedIndex = 0; // so you don't disable the option after it's selected
        $('#d2 option:eq(' + index + ')').prop('disabled', true);
    }
});​

http://jsfiddle.net/mblase75/QTDXt/6/

于 2012-12-18T14:43:47.643 回答
1 
$('#d1').change(function(e) {
index = $(this).prop('selectedIndex');
if (index != 0) {
  $('#d2 option:eq(' + index + ')').css('display','none');}
  $('#d2 option:eq(' + index + ')').siblings().css('display','block');
});

小提琴

于 2012-12-18T14:49:02.143 回答