webentwicklung-frage-antwort-db.com.de

jQuery ruft den Namen einer ausgewählten Option ab

Ich habe eine Dropdown-Liste mit mehreren Optionen, jede Option hat ein Namensattribut. Wenn ich eine Option auswähle, muss eine andere Liste von Kontrollkästchen angezeigt werden. Wenn eine andere Option ausgewählt ist, sollte diese Kontrollkästchenliste ausgeblendet und eine andere angezeigt werden.

Ich habe diese Kontrollkästchenlisten erstellt und ihnen eine ID gegeben, die mit dem Namensattribut der ausgewählten Option korreliert. Ich versuche, den folgenden Code zu verwenden, um die korrekte Checkbox-Liste anzuzeigen

$(document).ready(function(){

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

});

Es passiert jedoch nichts.

Hier sind meine Dropdown-Optionen:

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

und ein Beispiel für eine der Listen:

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

In Ihrem Code bezieht sich this auf das ausgewählte Element und nicht auf die ausgewählte Option

um auf die ausgewählte Option zu verweisen, können Sie dies tun -

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

Für jeden, der so spät rüberkommt, wie ich.

Wie andere angegeben haben, ist Name kein gültiges Attribut einer Option Element. Wenn Sie die oben akzeptierte Antwort mit dem Antwort von dieser anderen Frage kombinieren, erhalten Sie:

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

Erstens ist name kein gültiges Attribut eines option Elements. Stattdessen könnten Sie einen data -Parameter wie folgt verwenden:

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

Das Hauptproblem ist, dass der JS das name -Attribut des select -Elements betrachtet und nicht die gewählte Option. Versuche dies:

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

Beachten Sie das option:selected Selektor im Kontext des select, der das Änderungsereignis ausgelöst hat.

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

bedeutet den Namen des Select-Tags und nicht den Optionsnamen.

Um den Optionsnamen zu erhalten

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

Der Code ist sehr einfach, lassen Sie uns diesen Code setzen

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

Hier möchten Sie $(this).find().text() nicht verwenden, sondern können direkt Ihren ID-Namen eingeben und option:selected Zusammen mit text() hinzufügen.

Dies gibt den Ergebnisoptionsnamen zurück. Versuchen Sie es besser ...

1
Gowtham Ag

Die Verwendung des Namens für eine Auswahloption ist ungültig.

Andere haben das Datenattribut vorgeschlagen, eine Alternative ist eine Nachschlagetabelle

Hier bezieht sich das "dies" auf die Auswahl, so dass die Option nicht "gefunden" werden muss

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