चुनिंदा परिवर्तन पर, डेटा विशेषता मान प्राप्त करें

Question

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

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

Comments

क्या $ (यह) .find (': चयनित') या $ (यह) .children ('विकल्प: चयनित) का उपयोग करना बेहतर है?

— यूज़रबीजी

इस प्रश्न को देखें: stackoverflow.com/questions/648004/…

— जॉर्डन ब्राउन

Answer 1

आपको चयनित विकल्प खोजने की आवश्यकता है:

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

या

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

हालांकि पहली विधि पसंद की जाती है।

Comments

मैं गलती से अपने inital पोस्ट में attr () का उपयोग करता था, मेरा मतलब डेटा () था, लेकिन यह मेरे लिए 'अपरिभाषित' देता है।

— userBG

मैं अभी इस पर आया हूं और सोच रहा हूं कि क्या प्रदर्शन के कारण, या किसी अन्य कारण से पहली विधि पसंद की जाती है? @ जोर्डनबोर्न

— क्लार्के

@ क्लार्क मेरा अनुमान यह होगा कि डेटा () एटर () की तुलना में तेज़ है क्योंकि एट्रर () को यह पता लगाने के लिए अतिरिक्त काम करना होगा कि यह किस प्रकार की विशेषता है। बस एक अनुमान है।

— dev_willis

Answer 2

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

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

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

Comments

2016 find()की तुलना children()में इस तरह के मामलों में भी बहुत तेजी से होता है, जहां हमारे पास केवल एक पेड़ की गहराई है 2.

— हफेंक्रानिक

Answer 3

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

Comments

कृपया StackOverflow पर अपने पोस्ट कोड को स्पष्टीकरण और / या संदर्भ (भले ही समाधान सरल / "स्व-व्याख्यात्मक" हो) के साथ समर्थन करने का प्रयास करें क्योंकि हर कोई किसी भाषा के वाक्यविन्यास / व्यवहार / प्रदर्शन से परिचित नहीं है।

— मिकमैकुसा

Answer 4

वेनिला जावास्क्रिप्ट:

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

Comments

कृपया StackOverflow पर अपने पोस्ट कोड को स्पष्टीकरण और / या संदर्भ (भले ही समाधान सरल / "स्व-व्याख्यात्मक" हो) के साथ समर्थन करने का प्रयास करें क्योंकि हर कोई किसी भाषा के वाक्यविन्यास / व्यवहार / प्रदर्शन से परिचित नहीं है।

— मिकमैकुसा

Answer 5

आप के contextसाथ thisया वाक्यविन्यास का उपयोग कर सकते हैं $(this)। इस के रूप में एक ही प्रभाव है 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>

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

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

Answer 6

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

Comments

कृपया StackOverflow पर अपने पोस्ट कोड को स्पष्टीकरण और / या संदर्भ (भले ही समाधान सरल / "स्व-व्याख्यात्मक" हो) के साथ समर्थन करने का प्रयास करें क्योंकि हर कोई किसी भाषा के वाक्यविन्यास / व्यवहार / प्रदर्शन से परिचित नहीं है।

— मिकमैकुसा

ओपी idमें चयन तत्व पर एक विशेषता नहीं है (और उपयोगिता की वजह से इसकी आवश्यकता नहीं है this)।

— मिकमेकुसा

Answer 7

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

<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)
});

Comments

कृपया StackOverflow पर अपने पोस्ट कोड को स्पष्टीकरण और / या संदर्भ (भले ही समाधान सरल / "स्व-व्याख्यात्मक" हो) के साथ समर्थन करने का प्रयास करें क्योंकि हर कोई किसी भाषा के वाक्यविन्यास / व्यवहार / प्रदर्शन से परिचित नहीं है।

— मिकमैकुसा