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

Vanille-Javascript:

this.querySelector(':checked').getAttribute('data-id')

Answer 2

Sie können verwenden context Syntax mit this o $(this) . Dies ist der gleiche Effekt wie find() .

$('select').change(function() {
    console.log('Clicked option value => ' + $(this).val());
    <!-- undefined console.log('$(this) without explicit :select => ' + $(this).data('id')); -->
    <!-- error console.log('this without explicit :select => ' + this.data('id')); -->
    console.log(':select & $(this) =>    ' + $(':selected', $(this)).data('id'));
    console.log(':select & this =>       ' + $(':selected', this).data('id'));
    console.log('option:select & this => ' + $('option:selected', this).data('id'));
    console.log('$(this) & find =>       ' + $(this).find(':selected').data('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
    <option data-id="1">one</option>
    <option data-id="2">two</option>
    <option data-id="3">three</option>
</select>

Im Rahmen der Mikrooptimierung könnten Sie sich für Folgendes entscheiden find() . Wenn Sie eher ein Code-Golfer sind, ist die Kontextsyntax eher kurz. Es kommt im Wesentlichen auf den Codierungsstil an.

Hier ist ein relevanter Leistungsvergleich .

Answer 3

Das funktioniert bei mir

<select class="form-control" id="foo">
    <option value="first" data-id="1">first</option>
    <option value="second" data-id="2">second</option>
</select>

und das Skript

$('#foo').on("change",function(){
    var dataid = $("#foo option:selected").attr('data-id');
    alert(dataid)
});

Answer 4

Auf diese Weise können Sie den Text, den Wert und das Datenattribut abrufen.

<select name="your_name" id="your_id" onchange="getSelectedDataAttribute(this)">
    <option value="1" data-id="123">One</option>
    <option value="2" data-id="234">Two</option>
</select>

function getSelectedDataAttribute(event) {
    var selected_text = event.options[event.selectedIndex].innerHTML;
    var selected_value = event.value;
    var data-id = event.options[event.selectedIndex].dataset.id);    
}