從多個選擇列表中取消選擇選項

我有一個多選列表。當用戶取消選擇所選選項時，我想知道用戶所做的未選定選項的值。我如何捕捉它？從多個選擇列表中取消選擇選項

我的示例代碼如下。

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

來源

2016-01-29 Parag

你想單擊事件，並檢查目標的值是否未選中。如果是這樣，你只是得到了不受檢查的價值。我現在會爲你做一個小提琴。 – Casey

鼠標事件不支持跨瀏覽器。你需要做什麼具體的價值？ – charlietfl

@Casey根本無法跨越瀏覽器 – charlietfl

-1

如果我理解正確的話，你希望那只是得到未選中狀態，右邊的選項？

如果是這樣，試試這個：

創建一個變量「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/

不確定這是否正是您所需要的。請提供反饋

來源

2016-01-29 20:12:25

工作，但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

來源

2016-01-29 20:39:19 charlietfl

它可以工作，如果你取消選中一個項目，但是對於倍數，它只會給出最後選擇的值。 – DinoMyte

@DinoMyte不知道你的意思。我的解釋是，OP會因爲未選中每個值而取消選中某個值 – charlietfl

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

-1

正如其他人所提到的，關鍵是比較先前選定的值與當前值。既然你需要找出被刪除的值，你可以檢查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/

來源

2016-01-29 20:39:25 DinoMyte

使用''''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>

來源

2016-01-29 21:16:44

-1

你可以嘗試讓它

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

隨着v.text獲取文本

隨着v.value獲得價值

來源

2017-04-26 15:00:49

從多個選擇列表中取消選擇選項

回答

相關問題