optgroup выбрать название группы - PullRequest
4 голосов
/ 15 февраля 2012

Я хочу создать выпадающий список с сгруппированными элементами. Я работаю с HTML-формой поиска в базе данных. Есть ли способ выбрать заголовок группы, в результате чего будут выбраны все элементы в этой конкретной группе? Например, если название группы «German Cars» и содержит пункты «Mercedes» и «Audi», при нажатии «German Cars» необходимо выбрать обе немецкие автомобильные компании.

Ответы [ 2 ]

1 голос
/ 15 февраля 2012

Если вы предоставляете своим opt-группам класс, вы можете выбрать класс и получить доступ к его дочерним элементам.

$('.german-cars').children();

Если это недоступно, альтернатива будет немного медленной.Когда вы перебираете все группы опций и сравниваете их текст по отдельности, то выбираете их потомками.

edit : исправить селектор.И уточнение:

Затем, чтобы выбрать их по щелчку, вы будете использовать:

$('.german-cars').click(function(e) {
    e.preventDefault();
    $(this).children().attr('selected', 'selected');
});

Предполагая, что элемент установлен для множественного выбора.В противном случае будет выбран только последний автомобиль в списке.

РЕДАКТИРОВАТЬ 2

Fiddle: http://jsfiddle.net/mbChZ/25/

Эти изменения должны работать так, как выищем.

$(function() {
    $('select optgroup').mousedown(function(e) {
        e.preventDefault();
        if ($(this).children(':selected').length == $(this).children().length) {
            $(this).children().attr('selected', null);
        } else {
            $(this).children().attr('selected', 'selected');
        }
    });
    $('select option').mousedown(function(e) {
       e.stopPropagation();
       e.preventDefault();
       $(this).attr('selected', ($(this).is(':selected'))? null : 'selected');                    
    });
});​

Я изменил события на mousedown, чтобы мы могли видеть состояние элементов до того, как браузер уже обработал событие mousedown.Это позволяет нам проверить, все ли они выбраны, и если это так, отмените выбор, а не выберите.И то же самое должно было быть сделано для события click option, чтобы оно могло предотвратить распространение на этом событии.

Я не уверен на 100% в совместимости браузера на этом, хотя вы можете захотетьчтобы убедиться, что он работает в старых IE, если вы поддерживаете их.

0 голосов
/ 15 февраля 2012

Не надежным способом. optgroup только для параметров группировки, а не для влияния на функциональность. Но вы могли бы использовать набор флажков вместо select элементов, и тогда вы могли бы иметь флажок для «немецких автомобилей» и, например, Под ним под отступом установлены флажки для различных немецких моделей автомобилей.

Вы могли бы тогда иметь дело с этим различными способами. Вы можете просто справиться с ситуацией на стороне сервера, чтобы при проверке «немецких автомобилей» обработчик формы действовал так, как будто каждый флажок для немецкого автомобиля был выбран. Или вы могли бы дополнительно иметь обработчик на стороне клиента для флажка «Немецкие автомобили», чтобы этот флажок проверял отдельные флажки (но должен ли он затем снимать их, когда не отмечен)?

...