Подтвердить что ты не робот

JQuery получить имя опции выбора

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

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

$(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>
4b9b3361

Ответ 1

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

для ссылки на выбранный вариант, вы можете это сделать -

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

Ответ 2

Для тех, кто сталкивается с этим поздно, как и я.

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

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

Ответ 3

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

<option value="foo" data-name="bar">Foo Bar</option>

Основная проблема заключается в том, что JS ищет атрибут name элемента select, а не выбранную опцию. Попробуйте следующее:

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

Обратите внимание на селектор option:selected в контексте select, который поднял событие изменения.

Ответ 4

 $(this).attr("name") 

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

Чтобы получить имя опции

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

Ответ 5

Использование имени в опции выбора недопустимо.

Другие предложили атрибут 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();
  });
});
.checkboxlist { display:none }
Choose acoustic to see the corresponding div

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
  <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>

Ответ 6

Код очень прост, давайте этот код

var name = $("#band_type_choices  option:selected").text();

Здесь Вы не хотите использовать $(this).find().text(), непосредственно вы можете $(this).find().text() свое имя и добавить option:selected вместе с text().

Это вернет имя параметра результата. Лучше попробуй это...