jQuery получить имя параметра select

у меня есть выпадающий список с несколькими вариантами, каждый вариант имеет атрибут name. Когда я выбираю опцию,должен появиться другой список флажков - когда выбран другой параметр, этот список флажков должен исчезнуть и отобразиться другой.

Я создал эти списки флажков и дал им идентификатор, который коррелирует с атрибутом name выбранного параметра. Я пытаюсь использовать следующий код для отображения правильного флажка список

$(document).ready(function(){

       $('#band_type_choices').on('change', function() {         
    $('.checkboxlist').hide();
    $('#checkboxlist_' + $(this).attr("name") ).css("display", "block");

});

но ничего не происходит.

вот мои выпадающие варианты:

<select id="band_type_choices">
    <option vlaue="0"></option>
    <option value="100" name="acoustic">Acoustic</option>
    <option value="0" name="jazz">Jazz/Easy Listening</option>
    <option value="0" name="acoustic_jazz">Acoustic + Jazz/Easy Listening</option>
    <option value="0" name="party">Party</option>
    <option value="0" name="acoustic_party">Acoustic + Party</option>
    <option value="0" name="jazz_party">Jazz/Easy Listening + Party</option>
    <option value="0" name="acoustic_jazz_party">Acoustic + Jazz/Easy Listening + Party</option>
 </select>

и пример одного из списков:

<div class="checkboxlist" id="checkboxlist_acoustic" style="display:none;">
<input type="checkbox" class="checkbox keys" name="keys" value="100" />Keys<br>
<input type="checkbox" class="checkbox acou_guit" name="acou_guit" value="100" />Acoustic Guitar<br>
<input type="checkbox" class="checkbox drums" name="drums" value="100" />Drums<br>
<input type="checkbox" class="checkbox alt_sax" name="alt_sax" value="100" />Alto Sax<br>
<input type="checkbox" class="checkbox ten_sax" name="ten_sax" value="100" />Tenor Sax<br>
<input type="checkbox" class="checkbox clarinet" name="clarinet" value="100" />Clarinet<br>
<input type="checkbox" class="checkbox trombone" name="trombone" value="100" />Trombone<br>
<input type="checkbox" class="checkbox trumpet" name="trumpet" value="100" />Trumpet<br>
<input type="checkbox" class="checkbox flute" name="flute" value="100" />Flute<br>
<input type="checkbox" class="checkbox cello" name="cello" value="100" />Cello<br>
<input type="checkbox" class="checkbox violin" name="violin" value="100" />Violin<br>
</div>
17
attr hide jquery

5 ответов

в кодеthis относится к элементу select, а не к выбранному параметру

для ссылки на выбранную опцию вы можете сделать это -

$(this).find('option:selected').attr("name");
29

для всех, кто встречается так поздно, как я.

Как имя не является допустимым атрибутом опции элемент. Объединение принятого ответа выше с ответ на этот другой вопрос вы получаете:

$(this).find('option:selected').text();
45

во-первых name не является допустимым атрибутом option элемент. Вместо этого вы можете использовать на select элемент, а не выбранный вариант. Попробуйте это:

$('#band_type_choices').on('change', function() {         
    $('.checkboxlist').hide();
    $('#checkboxlist_' + $('option:selected', this).data("name")).css("display", "block");
});

Примечание option:selected селектор в контексте select что вызвало событие изменения.

3
 $(this).attr("name")

означает имя тега select, а не имя параметра.

получить имя параметра

 $("#band_type_choices option:selected").attr('name');
1

использование name в опции select недопустимо.

другие предложили атрибут data, альтернативой является таблица поиска

здесь "это "относится к выбору, поэтому нет необходимости" находить " опцию

var names = ["","acoustic","jazz","acoustic_jazz","party","acoustic_party","jazz_party","acoustic_jazz_party"];

$(function() {
  $('#band_type_choices').on('change', function() {         
  $('.checkboxlist').hide();
  var idx = this.selectedIndex;
  if (idx >0) $('#checkboxlist_' + names[idx]).show();
});
0