javascript - 从多个选择列表中获取未选择的选项

Question

我有一个多选列表。当用户取消选择所选选项时，我想知道用户未选择的选项的值。我如何捕获它？

我的示例代码如下。

<select multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select> 

我有以下 jquery 代码允许用户选择多个选项

$('option').mousedown(function(){ 
    e.preventDefault();
    $(this).prop('selected', $(this).prop('selected') ? false :true);
});

Answer 1

鼠标事件不能跨浏览器使用

我的建议是始终在选择中存储先前值的数组。

在每次更改时，您都可以与先前的值数组进行比较，一旦找到就更新存储的数组

$('#myselect').on('change', function() {
  var $sel = $(this),
    val = $(this).val(),
    $opts = $sel.children(),
    prevUnselected = $sel.data('unselected');
  // create array of currently unselected 
  var currUnselected = $opts.not(':selected').map(function() {
    return this.value
  }).get();
  // see if previous data stored
  if (prevUnselected) {
      // create array of removed values        
      var unselected = currUnselected.reduce(function(a, curr) {
        if ($.inArray(curr, prevUnselected) == -1) {
          a.push(curr)
        }
        return a
      }, []);
      // "unselected" is an array
      if(unselected.length){
        alert('Unselected is ' + unselected.join(', '));  
      }

  }
  $sel.data('unselected', currUnselected)
}).change();

DEMO