Ich versuche, das Datenattribut abzumelden, das ich an jede Option in meinem Auswahlfeld angehängt habe, aber ohne Erfolg. Bin ich mit .on ('change' ... korrekt) oder was soll ich tun, um dies zu erreichen?

JS

$('select').children().on('change', function(e){
    console.log( $(this).data('id') );
    e.preventDefault();
});

HTML

<select>
<option value="1" data-id="option1">wgwg</option>
<option value="1" data-id="option2">wgwerg</option>
<option value="1" data-id="option3">wgwg</option>
<option value="1" data-id="option4">wgr</option>
</select>​
10
styler 11 Okt. 2012 im 20:50

4 Antworten

Beste Antwort

Ein Änderungsereignis auf option ist nicht wirklich sinnvoll, da sich option nicht ändert. Das Ereignis sollte sich auf dem select befinden.

$('select').on('change', function(e){ 
    console.log( $(this).find("option:selected").data('id') ); 
    e.preventDefault(); 
}); 
21
James Montagne 11 Okt. 2012 im 16:52

Versuche dies,

Live-Demo

$('select').on('change', function(e){
    console.log( $('option:selected', this).data('id'));
    e.preventDefault();
});
2
Adil 11 Okt. 2012 im 16:57

Sie können es mit Vanilla Javascript :

console.log(this.querySelector(':checked').getAttribute('data-id'))
2
Arthur Araújo 29 Nov. 2016 im 12:23

Sie scheinen das Ereignis den untergeordneten Elementen von select zuzuweisen, was falsch ist. Sie müssen das Ereignis direkt der Auswahl zuweisen.

Auch this hat das Datenattribut nicht. Es ist das option that is selected. Ändern Sie also Ihren Code in diesen

Versuche dies

 $('select').on('change', function(e){
        console.log( $(this).find('option:selected').attr('data-id') );
    }).change();

ODER

$('select').on('change', function(e){
            console.log( $(this).find('option:selected').data('id') );
        }).change();
1
Sushanth -- 11 Okt. 2012 im 16:51