Cách dễ dàng để chọn nhanh toàn bộ nhóm chọn trong hộp chọn

Question

Tôi có một hộp chọn trong đó tôi có thể chọn nhiều tùy chọn. Trong hộp chọn là nhiều optgroups. Có cách nào dễ dàng để chọn toàn bộ optgroup cùng một lúc trong javascript?

Answer 1

tôi đề nghị sử dụng jQuery (hoặc khung khác) để nhanh chóng xử lý các lựa chọn DOM. Cung cấp cho mỗi optgroup một lớp để làm cho nó dễ dàng hơn để lấy nó.

$("optgroup.className").children().attr('selected','selected'); 

Nếu bạn muốn chọn toàn bộ nhóm dựa trên người dùng chọn nhóm, làm như sau:

$("optgroup.className").select(function(e) { 
    $(this).children().attr('selected','selected'); 
}); 

** Cả hai ví dụ là chưa được kiểm tra mã giả, nhưng họ nên làm việc với tối thiểu thay đổi, nếu cần.

Nếu bạn không thể sử dụng khung, bạn sẽ phải tự mình duyệt DOM để tìm nhóm và trẻ em. Bạn có thể đính kèm một trình lắng nghe vào phần tử select để lấy phần tử đang được chọn, sau đó đi qua các con theo cách đó.

Answer 2

jquery:

$('#myoptgroup option').attr('selected', true); 

Answer 3

Tôi thường chống lại việc sử dụng jQuery cho các công việc đơn giản như thế này nhưng tôi có thể thấy giá trị của nó ở đây. Tuy nhiên, nếu bạn muốn có một giải pháp phi jQuery mà sẽ có những lợi ích của việc sử dụng không có thư viện, giới thiệu không có id giả mạo hoặc các lớp học và chạy nhanh hơn, đây là một trong:

<script type="text/javascript"> 

function selectOptGroupOptions(optGroup, selected) { 
    var options = optGroup.getElementsByTagName("option"); 
    for (var i = 0, len = options.length; i < len; i++) { 
     options[i].selected = selected; 
    } 
} 

function selectOptGroup(selectId, label, selected) { 
    var selectElement = document.getElementById(selectId); 
    var optGroups = selectElement.getElementsByTagName("optgroup"); 
    var i, len, optGroup; 
    for (i = 0, len = optGroups.length; i < len; i++) { 
     optGroup = optGroups[i]; 
     if (optGroup.label === label) { 
      selectOptGroupOptions(optGroup, selected); 
      return; 
     } 
    } 
} 

</select> 

<select id="veg" multiple> 
    <optgroup label="roots"> 
     <option>Swede</option> 
     <option>Carrot</option> 
     <option>Turnip</option> 
    </optgroup> 
    <optgroup label="leaves"> 
     <option>Spinach</option> 
     <option>Kale</option> 
    </optgroup> 
</select> 

<input type="button" onclick="selectOptGroup('veg', 'roots', true)" value="Select roots"> 

Nếu bạn <optgroup> có một id bạn có thể làm với chức năng selectOptGroup và chỉ cần chuyển nhóm chọn thẳng vào selectOptGroupOptions.

Answer 4

Tôi đã cố gắng làm điều gì đó tương tự ngay bây giờ.

Tôi muốn chọn <optgroup> 's <option> giây khi nhấp vào nhãn của nhóm. Nỗ lực đầu tiên đã đi như thế này:

$('select > optgroup').click(function() { 
    $(this).children().attr('selected', true); 
}); 

nửa Giải pháp này làm việc ...

Khi nhấp nhãn 's <optgroup> tất cả các con của nó đã trở thành lựa chọn.

NHƯNG khi chỉ đơn giản là nhấp vào một <option> nó vẫn chọn tất cả các <option> s khác trong nhóm! Vấn đề là sự kiện sôi nổi, bởi vì <option> nằm trong số <optgroup> về mặt kỹ thuật bạn cũng đang nhấp vào nó.

Vì vậy, phần cuối cùng của câu đố là để ngăn chặn sự kiện sôi lên trên trong trường hợp một số <option> thực sự được nhấp để thay thế. Giải pháp cuối cùng sau đó trở thành:

$('select > optgroup').click(function() { 
    $(this).children().attr('selected', true); 
}); 

$('select > optgroup > option').click(function (e) { 
    if (!e) var e = window.event; 
    e.cancelBubble = true; 
    if (e.stopPropagation) e.stopPropagation(); 
}); 

Hoàn thành công việc!

EDIT

Infuriatingly này không hoạt động làm việc trong IE8 (và nghi ngờ < IE8 - có lẽ IE9) ...

Nó quyết định bỏ qua hoàn toàn các sự kiện nhấp chuột trên cả hai yếu tố. Cách thay thế duy nhất mà tôi có thể nghĩ đến là định vị các yếu tố phía trên nhãn nhóm để nắm bắt nhấp chuột, nhưng có lẽ nó không đáng để ...