web-dev-qa-db-fra.com

jQuery obtient le nom d'une option de sélection

J'ai une liste déroulante avec plusieurs options, chaque option a un attribut de nom. Lorsque je sélectionne une option, une autre liste de cases à cocher doit apparaître - lorsqu'une autre option est sélectionnée, cette liste de cases à cocher doit disparaître et une autre doit être affichée.

J'ai créé ces listes de cases à cocher et leur ai donné un ID qui correspond à l'attribut de nom de l'option sélectionnée. J'essaie d'utiliser le code suivant pour afficher la bonne liste de cases à cocher

$(document).ready(function(){

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

});

Mais rien ne se passe.

Voici mes options déroulantes:

<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>

et un exemple d'une des listes:

<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>
jqueryhideattr
21
Sam Skirrow

Dans votre code this fait référence à l'élément select et non à l'option sélectionnée

pour référencer l'option sélectionnée, vous pouvez le faire -

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

Pour tous ceux qui tombent si tard, comme moi.

Comme d'autres l'ont déclaré, nom n'est pas un attribut valide d'une option . En combinant la réponse acceptée ci-dessus avec réponse à cette autre question , vous obtenez:

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

Premièrement, name n'est pas un attribut valide d'un élément option. À la place, vous pouvez utiliser un paramètre data, comme ceci:

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

Le principal problème que vous rencontrez est que le JS examine l'attribut name de l'élément select, et non l'option choisie. Essaye ça:

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

Noter la option:selected sélecteur dans le contexte de select qui a déclenché l'événement change.

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

signifie le nom de la balise de sélection et non le nom de l'option.

Pour obtenir le nom de l'option

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

Le code est très simple, permet de mettre ce code

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

Ici, vous ne voulez pas utiliser $(this).find().text(), vous pouvez directement mettre votre nom d'identifiant et ajouter option:selected Avec text().

Cela renverra le nom de l'option de résultat. Mieux vaut essayer ceci ...

1
Gowtham Ag

L'utilisation du nom sur une option de sélection n'est pas valide.

D'autres ont suggéré l'attribut data-, une alternative est une table de recherche

Ici le "ceci" fait référence à la sélection donc pas besoin de "trouver" l'option

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>
1
mplungjan