从多个选择列表中取消选择选项

问题描述：

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

我的示例代码如下。

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

你想单击事件，并检查目标的值是否未选中。如果是这样，你只是得到了不受检查的价值。我现在会为你做一个小提琴。 – Casey

鼠标事件不支持跨浏览器。你需要做什么具体的价值？ – charlietfl

@Casey根本无法跨越浏览器 – charlietfl

答

如果我理解正确的话，你希望那只是得到未选中状态，右边的选项？

如果是这样，试试这个：

创建一个变量“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（）'是无效的 – charlietfl

哦，我没有注意到，我可以更新答案 –

@Parag他想要多个选项，但你仍然提供单一选项。 –

答

鼠标事件不可跨浏览器

我的建议是总是在选择前一个值的存储阵列。

在每一个改变，那么你可以比较前值阵列，一旦发现更新的存储阵列

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

@DinoMyte不知道你的意思。我的解释是，OP会因为未选中每个值而取消选中某个值 – charlietfl

@DinoMyte ok ...我只使用Ctrl + click我明白你的意思，如果使用SHIFT – charlietfl

答

正如其他人所提到的，关键是比较先前选定的值与当前值。既然你需要找出被删除的值，你可以检查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'''选择所有选项，然后取消选择'''Saab'''选项拿着'''ctrl'''或'''cmd'''，你会看到结果是错误的。 –

答

大的问题，我写了一段代码，用于检测用数据属性未被选择的选项。

$('#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){ 
 
    \t if($(this).attr('data-selected') == '1'){ 
 
     \t  //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>

答

你可以尝试让它

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

随着v.text获取文本

随着v.value获得价值

从多个选择列表中取消选择选项

相关推荐