多個選擇列表在點擊時移動鼠標時取消選擇所有選擇

我正在尋找使我的應用程序多選擇列表更多用戶友好，不需要用戶通過使用接受的答案來保持控制鍵來選擇多個選項here。多個選擇列表在點擊時移動鼠標時取消選擇所有選擇

它的效果很好，除非我注意到，如果您在點擊選項時甚至輕微移動鼠標，它也會取消選擇之前選擇的所有選項。

有沒有辦法糾正這種行爲，還是我只需要忍受？

例子：

$('select[multiple] option').mousedown(function() { 
 
    $(this).prop('selected', !$(this).prop('selected')); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select class="form-control" multiple="multiple"> 
 
    <option>A</option> 
 
    <option>B</option> 
 
    <option>C</option> 
 
    <option>D</option> 
 
    <option>E</option> 
 
</select>

來源

2015-10-20 JB06

這不是一個答案，只是一個供參考，但可以縮短，如果你做'這可以加快代碼.selected =！this.selected'。 jQuery的'.prop（）'在這裏並不是真的需要。 – 2015-10-20 14:06:18

我沒有看到您在Firefox中描述的行爲。這是什麼瀏覽器？ – 2015-10-20 14:07:20

我明白你的意思了。如果用戶單擊鼠標並拖出select元素，則會取消選擇所有內容。我想你可能不得不忍受這一點。 – Sachin

如果在第二個事件處理程序添加到偵聽mousemove事件，你可以告訴它忽略的默認操作。這可以防止所選的選項脫落，但保持原來的功能

$('select[multiple] option').on('mousedown', function(event) { 
 
    this.selected = !this.selected; 
 
    return false; 
 
}); 
 

 
// Prevent the mousemove from having any effect on the select box 
 
$('select[multiple] option').on('mousemove', function(event) { 
 
    event.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select class="form-control" multiple="multiple" size="5"> 
 
    <option>Apple</option> 
 
    <option>Banana</option> 
 
    <option>Coconut</option> 
 
    <option>Date</option> 
 
    <option>Elderberry</option> 
 
</select>

來源

2015-10-20 14:28:36 Lynch

多個選擇列表在點擊時移動鼠標時取消選擇所有選擇

回答

相關問題