0

我有 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>

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

我希望这是足够的信息，但请询问您是否需要更多信息。

编辑

对不起，我错过了，但我正在使用选择的插件

4

4 回答 4

2 
$('#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/（如果与当前相同，则更改其他选择框上选定选项的值）

于 2012-08-03T10:30:12.653 回答
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);
于 2012-08-03T10:32:50.437 回答
0 
$('#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();
   });
});
于 2012-08-03T10:32:20.670 回答
0 
$('#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'});

}); });

于 2012-08-03T10:38:55.497 回答