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

【问题标题】：get unselected option from multiple select list从多个选择列表中获取未选择的选项
【发布时间】：2017-04-26 23:00:49
【问题描述】：

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

我的示例代码如下。

<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);
});

【问题讨论】：

要获取点击事件，查看target的值是否未选中。如果是这样，您就得到了未经检查的值。我现在就给你做一个小提琴。
鼠标事件不支持跨浏览器。您具体需要对值做什么？
@Casey 无法跨浏览器运行

标签： javascript jquery

【解决方案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

【讨论】：

如果您取消选中单个项目，它会起作用，但对于多个项目，它只会给出最后选择的值。
@DinoMyte 不确定你的意思。我的解释是，OP 会因为未选择每个值而取消选择它
@DinoMyte 好的...我只使用Ctrl +click 我明白你的意思如果使用 SHIft
它只会失败，如果您选择了超过 2 个项目，然后您从所选项目中单击一个项目，它会为您提供上次选择的删除值，而不是其他 2 个 ..跨度>
@DinoMyte 修复了它以返回一个数组 ..thx 以供抬头。手动测试一种方式与其他人以不同方式使用 UI 的老故事。使用 Ctrl + 单击运行良好会捕获个人

【解决方案2】：

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

$('#select').on('change', function() {  
    var selected = $(this).find('option:selected');
    var unselected = $(this).find('option:not(:selected)');
    selected.attr('data-selected', '1');
    $.each(unselected, function(index, value){
    	if($(this).attr('data-selected') == '1'){
      	    //this option was selected before
            alert("I was selected before " + $(this).val());
            $(this).attr('data-selected', '0');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple id="select">
 <option data-selected=0 value="volvo">Volvo</option>
 <option data-selected=0 value="saab">Saab</option>
 <option data-selected=0 value="opel">Opel</option>
 <option data-selected=0 value="audi">Audi</option>
</select>

【讨论】：

【解决方案3】：

如果我理解正确，您想要刚刚未选中的选项，对吧？

如果是这样，试试这个：

创建一个变量“lastSelectedValue”（或任何您想调用的变量）。当您选择一个选项时，分配给它，当您更改所选选项时，您可以获取值并使用它，并再次分配给它

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

这是一个小提琴：https://jsfiddle.net/ahmadabdul3/xja61kyx/

更新了多个：https://jsfiddle.net/ahmadabdul3/xja61kyx/

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

【讨论】：

但 OP 正在处理返回数组的多个。 this.val() 也无效
@Parag 他想要它有多个选项，但你仍然提供了一个选项。

【解决方案4】：

正如其他人所提到的，关键是将先前选择的值与当前值进行比较。由于您需要找出删除的值，因此您可以检查 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;
});

工作示例：https://jsfiddle.net/DinoMyte/cw96h622/3/

【讨论】：

使用ctrl 或cmd 选择所有选项，然后在您持有ctrl 或cmd 时取消选择Saab 选项，您会看到结果错误。

【解决方案5】：

你可以试试

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

使用 v.text 获取文本

用 v.value 得到值

【讨论】：