चुनिंदा विकल्प विकल्प की डेटा विशेषता कैसे वापस करें?

Question

मैं अपने चुने हुए बॉक्स में प्रत्येक विकल्प से जुड़े डेटा एट्रिब्यूट को लॉग आउट करने का प्रयास कर रहा हूं लेकिन बिना किसी सफलता के, क्या मैं .on ('change' ... या इसे प्राप्त करने के लिए क्या कर रहा हूं?

जे एस

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

एचटीएमएल

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

Answer 1

option पर एक परिवर्तन घटना वास्तव में option के रूप में समझ में नहीं बदल रहा है नहीं है की कोशिश करो । घटना select पर होनी चाहिए।

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

Answer 2

इस प्रयास करें,

Live Demo

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

Answer 3

आपके द्वारा चुने गए बच्चों जो गलत है .. आप सीधे चयन करने के लिए घटना आवंटित करने के लिए जरूरत के लिए घटना आवंटित करने के लिए ..

इसके अलावा this डेटा विशेषता नहीं है लग रहे हैं। यह option that is selected है .. तो यह

करने के लिए अपने कोड बदलने इस

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

या

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

Answer 4

आप वेनिला जावास्क्रिप्ट साथ यह कर सकते हैं:

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