optgroup select title of group

Question

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

Answer 1

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

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

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

Редактировать: Установить селектор. И -разработка:

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

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

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

EDIT 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, если вы их поддерживаете.

Answer 2

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

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