Bei Änderung der Auswahl den Wert des Datenattributs abrufen

Question

Der folgende Code gibt 'undefiniert' zurück...

$('select').change(function(){
    alert($(this).data('id'));
});

<select>
    <option data-id="1">one</option>
    <option data-id="2">two</option>
    <option data-id="3">three</option>
</select>

Answer 1

Sie müssen die ausgewählte Option finden:

$(this).find(':selected').data('id')

ou

$(this).find(':selected').attr('data-id')

obwohl die erste Methode bevorzugt wird.

Answer 2

Versuchen Sie das Folgende:

$('select').change(function(){
  alert($(this).children('option:selected').data('id'));
});

Ihr Änderungsabonnent abonniert das Änderungsereignis des Selects, so dass die this Parameter ist das Select-Element. Sie müssen das ausgewählte Kind finden, von dem Sie die Daten-ID erhalten.

Answer 3

document.querySelector('select').onchange = function(){   
   alert(this.selectedOptions[0].getAttribute('data-attr')); 
};

Answer 4

Vielleicht ein eleganterer Weg

$('option:selected', this).data('id')

Answer 5

$('#foo option:selected').data('id');