2013-03-23 35 views
16

Tôi tự hỏi nếu có thể trong Javascript để nhận các tùy chọn hiện được chọn trong trường <select multiple> bằng cách sử dụng API Selctors thay vì lặp lại "ngu ngốc" trên tất cả các tùy chọn.Nhận các tùy chọn đã chọn với querySelectorAll

select.querySelectorAll('option[selected="selected"]') chỉ trả lại các tùy chọn được đánh dấu là được chọn trước trong HTML gốc, không phải là những gì tôi đang tìm kiếm. Bất kỳ ý tưởng?

+0

Tôi nghĩ rằng lựa chọn duy nhất của bạn là để lặp yếu tố khắp nơi 'option' và lọc ra những cái chưa được chọn. –

Trả lời

38

document.querySelectorAll('option:checked')

Làm việc ngay cả trên IE9;)

+0

[Cần làm việc với 9.0] (https://developer.mozilla.org/en-US/docs/CSS/:checked), Khả năng tương thích của trình duyệt ở dưới cùng – zeroflagL

+0

Nếu jQuery là một tùy chọn thì bạn có thể sử dụng ': selected' Bộ chọn – zeroflagL

+0

Quá tệ, nhưng tốt để biết. – zeroflagL

1

Tôi cũng đã gặp phải sự cố của bạn, tôi có cảm giác nó liên quan đến JavaScript không nhận ra những thay đổi trong DOM.

Đây là một giải pháp:

jsFiddle

document.getElementById('test').onclick = function() { 
    var select = document.getElementById('select'); 
    var options = getSelectedOptions(select); 
    console.log(options); 
}; 

function getSelectedOptions(select) { 
    var result = []; 
    var options = select.getElementsByTagName('option'); 
    for (var i = 0; i < options.length; i++) { 
     if (options[i].selected) 
      result.push(options[i]); 
    }; 
    return result; 
} 
+0

Cảm ơn, đây là những gì tôi đang làm. –

+0

JS nhận ra những thay đổi này đối với DOM. Vấn đề là thuộc tính DOM được chọn là không thể tuần tự hóa được. Thuộc tính 'selected' tương ứng với thuộc tính DOM' defaultSelected', vì vậy việc truy vấn thuộc tính như trong '[selected ]' sẽ trả về các phần tử có thuộc tính DOM' defaultSelected' được đặt thành 'true'. –

Các vấn đề liên quan