Bỏ chọn các tùy chọn đã chọn trong nhiều menu và chọn nhóm

Question

Tôi muốn có thể nhấp chuột vào liên kết để có thể bỏ chọn tất cả các tùy chọn đã chọn trước trong menu chọn có nhiều lựa chọn và với các nhóm tùy chọn.

Dưới đây là một ví dụ về menu:

<select name="ddBusinessCategory" id="ddBusinessCategory" class="f1" style="width:280px;height:200px" multiple="multiple"> 
<option value="">Select One</option> 
<optgroup label="Abrasives" style="background:#F5F5F5;border-bottom:1px #EEE solid"> 
<option value="4" selected="selected">Abrasives</option> 
</optgroup> 
<optgroup label="Abstracters" style="background:#F5F5F5;border-bottom:1px #EEE solid"> 
<option value="5">Abstracters</option> 
</optgroup> 
<optgroup label="Abuse Information &amp; Treatment Centers" style="background:#F5F5F5;border-bottom:1px #EEE solid"> 
<option value="6" selected="selected">Abuse Information &amp; Treatment Centers</option> 
</optgroup> 
<optgroup label="Accountants" style="background:#F5F5F5;border-bottom:1px #EEE solid"> 
<option value="7">Accountants</option> 
<option value="2672">Certified Public Accountants - </option> 
<option value="2673">Public Accountants - </option> 
</optgroup> 
<optgroup label="Accounting Services" style="background:#F5F5F5;border-bottom:1px #EEE solid"> 
<option value="8">Accounting Services</option> 
</optgroup> 
<optgroup label="Acoustical Materials - Wholesale &amp; Manufacturers" style="background:#F5F5F5;border-bottom:1px #EEE solid"> 
<option value="9">Acoustical Materials - Wholesale &amp; Manufacturers</option> 
</optgroup> 
</select> 

Bạn sẽ thấy hai được lựa chọn .. Tôi muốn để có thể bỏ chọn những cái chọn trước.

DONT muốn sử dụng jquery, chỉ muốn sử dụng javascript

Rất cám ơn sự hỗ trợ của bạn.

neojakey

Answer 1

Chức năng sau đây nên lặp qua tất cả các tùy chọn và bỏ chọn chúng.

HTML

<a href="#" onclick="clearSelected();">clear</a> 

JAVASCRIPT

function clearSelected(){ 
    var elements = document.getElementById("ddBusinessCategory").options; 

    for(var i = 0; i < elements.length; i++){ 
     elements[i].selected = false; 
    } 
    } 

EDIT:

Tôi không tán thành việc đưa các xử lý sự kiện trực tiếp trên phần tử. Nếu bạn có tùy chọn, hãy cung cấp cho phần tử một số loại id/name và ràng buộc trình xử lý sự kiện trong mã JavaScript của bạn.

EXAMPLE

Answer 2

Nếu bạn không quan tâm đến < IE8:

var checkedElements = document.querySelectorAll("#ddBusinessCategory :checked"); 

​for(var i = 0, length = checkedElements.length; i < length; i++) { 
    checkedElements[i].selected = false; 
}​ 

Nếu bạn không quan tâm đến < IE9

Array.prototype.forEach.call(document.querySelectorAll("#ddBusinessCategory :checked"), function(el) { el.selected = false }); 

Sử dụng câu trả lời từ Chase nếu bạn muốn hỗ trợ IE7, IE6, FF3 và trước đó hoặc cảm thấy dễ đọc hơn.

Answer 3

Bạn có thể đơn giản hóa mã từ Chase với tài sản javascript "selectedOptions"

HTML

<a href="#" onclick="clearSelected();">clear</a> 

JAVASCRIPT

function clearSelected(){ 
    var elements = document.getElementById("ddBusinessCategory").selectedOptions; 

    for(var i = 0; i < elements.length; i++){ 
     elements[i].selected = false; 
    } 
    } 

Trong trường hợp này bạn làm một vòng lặp với các tùy chọn đã chọn và không phải tất cả các tùy chọn.

Answer 4

Nếu bạn đang sử dụng jquery bạn có thể làm (tôi biết người hỏi này được mong đợi một câu trả lời js nhưng điều này có thể giúp đỡ một người nào đó)

$('#someid').find($('option')).attr('selected',false) 

Answer 5

Nếu bạn chỉ muốn lặp qua chỉ là tùy chọn đã chọn, Tôi đề nghị một vòng lặp while.

var elements = document.getElementById("ddBusinessCategory").selectedOptions; 
while (elements.length > 0) 
{ 
    elements[0].selected = false; 
} 

Câu trả lời bởi Michel SALHI sẽ không hoạt động khi có nhiều lựa chọn, bởi vì khi bạn tiến bộ thông qua các vòng lặp for giá trị của elements.length thay đổi.

Điều đó nói rằng thuộc tính .selectedOptions hơi rắc rối (xem Is selectedOptions broken or...?) vì vậy có thể không đáng giá bất kỳ khoản tiết kiệm nhỏ nào bạn nhận được chỉ bằng cách lặp qua các tùy chọn đã chọn.

Answer 6

có nó không thể đơn giản chỉ cần sử dụng ?:

document.getElementById("ddBusinessCategory").value = ""; 

Answer 7

Bạn không cần bất kỳ vòng lặp. Thuộc tính Index đã chọn "Sets or returns the index of the selected <option> element in the collection (starts at 0)".
Việc lập chỉ mục bắt đầu bằng 0 vì vậy nếu bạn đặt chỉ mục thành -1 thì không được chọn. (đặt thành 0 sẽ để tùy chọn đầu tiên được chọn.)

function clearSelected(w){ 
    document.getElementById(w).selectedIndex = -1; 
} 
<a href="#" onclick="clearSelected('ddBusinessCategory');">clear</a>