Question

我有2个具有匹配选项的选择菜单，例如

<select id="select-one">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

<select id="select-two">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

我需要在更改功能中执行的操作是，如果从任一菜单中选择了一个选项，则隐藏/删除其他列表中的匹配选项。当选择了不同的选项时，我需要再次显示它。

我希望有足够的信息，但请询问您是否还需要。

修改

抱歉，我错过了，但我使用的是chosen plugin

Answer 1

$('#select-one').on('change', function () {
  var value = $(this).val();
  $('#select-two').children('option').each(function () {
    if ($(this).val() == value) {
      $(this).hide();
        if ($(this).is(':selected') == true) {
            if ($(this).val() == 3) {
                $(this).removeAttr('selected')
                $(this).prev().attr('selected', '')
            } else {
                $(this).removeAttr('selected')
                $(this).next().attr('selected', '')
            }
        }
    } else {
      $(this).show();
    }
  });
});

这应该可以工作（未经测试），只需复制第二个，当然替换ID。需要放入加载选择框后执行的函数或$(document).ready()函数。

哦，你需要正确关闭你的选项标签</option>

JSfiddle http://jsfiddle.net/m7q3H/38/（有效）

更新：http://jsfiddle.net/m7q3H/39/（如果与当前相同，则更改其他选择框中所选选项的值）

Answer 2

我个人要做的第一件事就是为每个选项添加data-*属性，其中包含另一个选择的ID。这使您可以使代码更通用，而不是必须使用切换ID进行复制：

<select id="select-one" data-select="select-two">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select id="select-two" data-select="select-one">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

然后是jQuery代码：

$('#select-one,#select-two').chosen().change(function(e) {
    var that = this;
    var $otherSelect = $('#' + $(this).data('select'));
    $otherSelect.find('option').show().filter(function() {
       return this.value == that.value;
    }).hide();        
});

为两个选择添加change事件处理程序。它做的第一件事是将this（已更改的<select>）的副本存储到另一个变量中，因此它可以在传递给.filter()的函数内引用它。

然后使用元素的<select>属性获取对其他data-select元素的引用。

现在它在其中选择所有选项元素并显示它们，然后将列出的列表过滤到具有匹配值的那些元素，并隐藏它。

更新：

如果您分别在<select>元素上调用所选插件，则可能需要将匿名函数移动到命名函数，如下所示：

function handleChange() {
    var that = this;
    var $otherSelect = $('#' + $(this).data('select'));
    $otherSelect.find('option').show().filter(function() {
        return this.value == that.value;
    }).hide();
}

然后在分别指定change事件处理程序时传递对该函数的引用：

$('#select-one').chosen().change(handleChange);
$('#select-two').chosen().change(handleChange);

Answer 3

$('#select-one').change(function(e){
   var val_one = $(this).val();
   $('#select-two option').each(function(){
     if($(this).val() === val_one)
        $(this).hide();
     else
        $(this).show();
   });
});

Answer 4

$('#select-one').change(function() {
val = $(this).val();
$('#select-two option').each(function(){
$(this).css({'display' : 'block'});
if($(this).val() == val)
    $(this).css({'display': 'none'});

}）;

$('#select-two').change(function() {
val = $(this).val();
$('#select-one option').each(function(){
$(this).css({'display' : 'block'});
if($(this).val() == val)
    $(this).css({'display': 'none'});

}）; }）;

jQuery从2个选择菜单中查找/隐藏匹配选项值

4 个答案: