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

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

我的示例代码如下

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

---

如果我没弄错的话，你想要一个没有被选中的选项，对吗

如果是，请尝试以下方法：

创建一个变量lastSelectedValue或任何您想调用的变量。选择某个选项时，将其指定给该选项；更改选定选项时，可以获取值并使用它，然后再次指定给它

var lastSelectedOption = '';
$('select').on('change', function(){ 
   //do what you need to do
   lastSelectedOption = this.val();
});

这是一把小提琴：

更新了多个：

---

不确定这是否正是你需要的。请提供反馈

跨浏览器无法使用鼠标事件

我的建议是总是在select上存储以前的值数组

在每次更改时，您都可以将其与先前的值数组进行比较，并在找到后更新存储的数组

$('#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();

---

正如其他人所提到的，关键是将以前选择的值与当前值进行比较。由于需要计算删除的值，您可以检查lastSelected.length>currentSelected.length，然后简单地替换lastSelected中的currentSelected以获得结果

var lastSelected = "";
$('select').on('change', function() {
    var currentSelected = $(this).val();  
    if (lastSelected.length > currentSelected.length) {
       var a = lastSelected.toString().replace(currentSelected.toString(),"");
        alert("Removed value : " + a.replace(",",""));
     }     
      lastSelected = currentSelected;
});

---

工作示例：

好问题，我编写了一些代码，用于使用数据属性检测未选择的选项

$'select'。在'change'上，函数{ var selected=$this.find'option:selected'； var unselected=$this.find'option:not:selected'； 已选定。attr'data-selected'，'1'； $.eachunselected，函数索引，值{ 如果$this.attr'data-selected'='1'{ //此选项是以前选择的 alertI在+$this.val之前被选中； $this.attr'data-selected'，'0'； } }; }; 沃尔沃汽车 萨博 欧宝 奥迪 你可以试试看

$('#link_to_id').find('option').not(':selected').each(function(k,v){
    console.log(k,v.text, v.value);
});

使用v.text获取文本

---

使用v.value获取要获取单击事件的值

，并检查目标值是否未选中。如果是这样的话，您就得到了未检查的值。我现在就给你做一把小提琴。跨浏览器不支持鼠标事件。您具体需要如何处理该值？@Casey，它根本无法跨浏览器工作，但OP处理的是返回数组的倍数。还有，这是valinvalid@Parag他希望它具有多个选项，但您仍然提供了单个选项。如果您取消选中单个项目，则可以使用该选项，但对于多个项目，它只提供最后选定的值。@DinMyte不确定您的意思。我的解释是，OP会使每一个未选择的值保持原样unselected@DinoMyte好的…我只使用了Ctrl+click我明白你的意思如果use SHiftit仅失败，如果你选择了两个以上的项目，然后你从所选项目中单击一个项目，它会给你从上次选择的项目中删除的值，不是其他的2..@Dinmyte修复了它返回数组..thx的问题。手动测试一种方式与其他人以不同方式使用UI的老故事。使用Ctrl+click是否工作正常将捕获个人使用Ctrl或cmd选择所有选项，然后在按住Ctrl或cmd的同时取消选择Saab选项，您将看到结果是错误的。

$('#link_to_id').find('option').not(':selected').each(function(k,v){
    console.log(k,v.text, v.value);
});