jquery - tutorial - w3schools




चयन परिवर्तन पर, डेटा विशेषता मान प्राप्त करें (6)

आप this या $(this) साथ context वाक्यविन्यास का उपयोग कर सकते हैं। यह वही प्रभाव है find()

$('select').change(function(){
    console.log('Clicked option value => ' + $(this).val());
    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'));
});
<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>

सूक्ष्मदर्शीकरण के मामले में, आप find() लिए चुन सकते हैं find() । यदि आप कोड गोल्फर से अधिक हैं, तो संदर्भ वाक्यविन्यास अधिक संक्षिप्त है। यह मूल रूप से कोडिंग शैली के लिए नीचे आता है।

यहां एक प्रासंगिक प्रदर्शन तुलना है ।

निम्नलिखित कोड 'अपरिभाषित' लौटाता है ...

$('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>

आपको चयनित विकल्प ढूंढना होगा:

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

या

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

हालांकि पहली विधि को प्राथमिकता दी जाती है।


निम्नलिखित आज़माएं:

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

आपका परिवर्तन ग्राहक चयन की परिवर्तन घटना की सदस्यता लेता है, इसलिए this पैरामीटर चुनिंदा तत्व है। डेटा-आईडी प्राप्त करने के लिए आपको चयनित बच्चे को ढूंढना होगा।


यह मेरे लिए काम करता है

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

और लिपि

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

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

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




jquery