HTML Select Multiple - 查找选择了哪个选项

Question

我有几个带有一些选项的 SELECT 标记。

选定的选项在所有列表中必须是唯一的，而未选定的选项是共享的，并且应该可供每个选择使用。

然后，当在一个 SELECT 中选择了某个选项时，它应该从其他列表中删除。当某个选项未被选中时，它应该在所有列表中再次可用。

我的问题是我找不到刚刚（未）选择的选项。我在 SELECT 上尝试了 onChange 事件，但找不到最后选择的选项。另外，我在 OPTION 标签上尝试了各种事件，但没有触发事件。

当然，如果我在 JavaScript 中使用 SELECT 的值，那么我只会得到用逗号分隔的所有值，我无法从中知道添加或删除了哪个值。

是否可以在 OPTION 标签上使用一些事件来获取当前选中或未选中项的值？

谢谢！

Answer 1

此方法将更新所有选择，以便在选择项目后将其从对应项中删除。相反，取消选择也会将该选项添加回其他人

var $selects = $('select'),
    $storedOpts = $selects.first().children().clone();

$selects.change(function(){        
    $selects.not(this).each(function(){
        var otherVals = $.map($selects.not(this).find(':selected'),function(opt){
           return opt.value
       });
        var currVal = $(this).val();
        var $options = $storedOpts.clone().filter(function(_, option){
            return $.inArray(option.value, otherVals) == -1;
        })
        $(this).html($options).val(currVal);

    });  

});

DEMO

Answer 2

您可以遍历 select 元素中的所有选项，并确定是否每个选项都被选中，如下所示：

var selectele = document.getElementById('your_select_id');
for(var i = 0; i < selectele.options.length; i++){
    var option = selectele.options[i];
    if(option.selected){
        // this option is selected
    }else{
        // this option is not selected
    }
}

使用它，您可以在 javascript 代码中保留所有可用选项的单独列表，并在任何更改时重新构建整个选项列表。这样您就不必考虑任何选择列表可能发生的变化。

Answer 3

您可以在jQuery中使用.data()来存储之前选择的值以供以后使用，然后只需绑定到更改事件：

示例：

$('.foo').change(function() {

  // setup
  var option = $(this).find(':selected'),
    text = option.text(),
    self = $(this),
    data = $(this).data('prev'),
    foos = $('.foo');

  // unhide
  if (text === '-- select --') {
    foos.not(self).each(function() {
      var unhide = $(this).children('option').filter(function() {
        return $(this).html() == data; // <-- previous
      });
      unhide.show();
    });
  } else { // hide
    foos.not(self).each(function() {
      var hide = $(this).children('option').filter(function() {
        return $(this).html() == text; // <-- current
      });
      hide.hide();
    });
  }

  // store the previously selected value  
  $(this).data('prev', text);

});

.foo {
  margin: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="foo">
  <option>-- select --</option>
  <option>bar</option>
  <option>bim</option>
  <option>baz</option>
</select>
<select class="foo">
  <option>-- select --</option>
  <option>bar</option>
  <option>bim</option>
  <option>baz</option>
</select>
<select class="foo">
  <option>-- select --</option>
  <option>bar</option>
  <option>bim</option>
  <option>baz</option>
</select>