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

鼠标事件无法跨浏览器

我的建议总是在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();

的 DEMO

Answer 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>

Answer 3

如果我理解正确，你想要一个刚未被选中的选项，对吗？

如果是这样，试试这个：

创建一个变量＆＃34; lastSelectedValue＆＃34; （或者你想称之为的任何东西）。当您选择一个选项时，分配给它，当您更改所选选项时，您可以获取该值并使用它，然后再分配给它

rails g model User

这是一个小提琴：regex

使用multiple https://jsfiddle.net/ahmadabdul3/xja61kyx/

进行了更新

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

Answer 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/

Answer 5

你可以试试吧

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

使用v.text获取文本

使用v.value获取值

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

5 个答案: