चयनित विकल्प के दौरान कोई ईवेंट कैसे प्राप्त करें ड्रॉपडाउन का पहले से ही चयनित विकल्प है?

Question

प्रेरणा:

के बाद

मैं गतिशील एक AJAX कॉल से मूल्यों के साथ एक select लोड, और करने के लिए उपयोगकर्ता चयन सूची में पहला आइटम अनुमति देना चाहते हैं एक बार यह भरी हुई है और यह ध्यान दिया जाता है, अभी , पहला आइटम चयनित आइटम है और जब आप ड्रॉपडाउन पर क्लिक करते हैं और पहले आइटम पर क्लिक नहीं होता है। मैं कोई भी प्लेसहोल्डर आइटम नहीं जोड़ सकता जो मान्य चयन नहीं है।

प्रश्न:

तुम कैसे jQuery में .change ईवेंट सक्रिय है जब वर्तमान में चयनित विकल्प reselected है/नहीं बदला?

को देखते हुए निम्नलिखित:

<select id="myoptions"> 
    <option id="one" >Option 1</option> 
    <option id="two">Option 2</option> 
</select> 

यह मानते हुए कि विकल्प one चयन किया जाता है, और मैं लटकती पर क्लिक करें और फिर one का चयन करें, क्या घटना आग?

$('#myoptions').change(function() { 
    alert('You selected something!'); 
} 

उपरोक्त कोड काम करता है अगर मैं कुछ अलग चुनता हूं, लेकिन यदि मैं वर्तमान में चयनित विकल्प का चयन करता हूं तो कुछ भी नहीं होता है।

दूसरे शब्दों में:

अगर मैं लटकती और पर क्लिक करें "का चयन करें" वर्तमान में चयनित विकल्प, मैं कैसे एक घटना आग मिलता है?

नहीं

उत्तर:

इन सभी trigger के बारे में सुझाव मैं कुछ है कि आग जब मैं माउस साथ Option 1पर क्लिक करें जब Option 1 पहले से ही चुना विकल्प है की जरूरत है, समाधान नहीं हैं।

मैंने .click का उपयोग करने की कोशिश की और तब कुछ भी नहीं होता है।

जवाब में से कोई भी बहुत पहले समय के लटकती चयन किया जाता है के उपयोग के मामले के लिए एक काम कर समाधान है, और किसी को का चयन करता है डिफ़ॉल्ट चयनित विकल्प। कुछ नहीं हुआ।

focusout कोई समाधान नहीं है, ऐसा तब तक नहीं होता जब तक कोई व्यक्ति कहीं और क्लिक न करे, जो गेम में बहुत देर हो चुकी है।

Answer 1

कार्य समाधान:

सबसे पहले आप स्पष्ट रूप से एक selected राज्य के लिए पहला आइटम सेट करना होगा।

<select id="myoptions"> 
    <option id="one" selected="selected">Option 1</option> 
    <option id="two">Option 2</option> 
</select> 

फिर अपनी जावास्क्रिप्ट में आपको स्पष्ट रूप से selected विशेषता को हटा देना होगा।

$('#myoptions option:selected').removeAttr('selected'); 

$("#myoptions").on("change", function(){ 
    console.debug($('#myoptions').find('option:selected').val()); 
}); 

यह प्रारंभिक पर एक खाली/खाली ड्रॉप डाउन बॉक्स दिखाएगा। जो आपको पहली बार ड्रॉपडाउन पर क्लिक करने पर सूची में पहली आइटम चुनने की अनुमति देगा क्योंकि option में अब selected विशेषता है।

इसका एक खाली प्लेसहोल्डर चयन को देखने के लिए वास्तव में एक होने के बिना लाभ होता है और इसे चुनने के लिए सभी ठोस तर्क लिखने का लाभ होता है।

CodePen working example of the solution.सुनिश्चित करें कि आप लिंक पर क्लिक करने से पहले जावास्क्रिप्ट डीबग कंसोल खोलें और आपको वांछित प्रभाव दिखाई नहीं देगा।

यह अभी भी reselection इस मुद्दे को हल नहीं करता है तो कई अन्य लोगों से पूछा है कि जिसके बारे में एक ऐसी ही समस्या है, जो मैं एक ताज़ा तंत्र के रूप में उपयोग करना चाहते हैं नहीं है, लेकिन मुझे लगता है कि किसी अन्य रूप में से निपटने जाएगा सवाल।

Answer 2

तत्वों पर कस्टम घटनाओं को आग लगाने के लिए .trigger() फ़ंक्शन का उपयोग करें।

$("#yourelementid").trigger('change'): 

इस तरह आप के बाद से आप ऐसा करने के लिए जब आप लटकती पर क्लिक करें और पिछले तत्व का चयन चाहते आईडी yourelementid

अब साथ तत्व पर change घटना हो सकती है। एक क्लिक घटना जोड़ना चाहिए।

$("#yourelementid").on('click', function() { 
    $(this).trigger('change'); 
}); 

Answer 3

आप क्लिक ईवेंट या फोकसआउट का उपयोग कर सकते हैं। क्लिक करें ईवेंट काम नहीं करेगा यदि उपयोगकर्ता टैब + एंटर जैसे कीबोर्ड का उपयोग कर रहा है लेकिन फोकसआउट काम करेगा।

संपादित करें:

जोड़ा एक डेमो: http://jsfiddle.net/fPRe7/ क्लिक करें काम करता है यहां तक ​​कि यदि आप एक चयनित आइटम पर क्लिक करें।

$("#myoptions").on("click", function(){ 
    console.debug("click"); 
}); 

$("#myoptions").on("change", function(){ 
    console.debug("changed"); 
}); 
$("#myoptions").on("focusout", function(){ 
    console.debug("focusout"); 
}); 

क्रोम केवल 1 क्लिक (एक चुनें) मिल जाएगा, लेकिन जब आप का चयन करें और एक अन्य को खोलने एफएफ 2 क्लिक, एक क्लिक मिलता है जब एक का चयन करेंगे।

Answer 4

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

$(document).ready(function(){ 

    $('#myoptions').change(function(e){ 
     alert('You selected something!'); 
    }); 

    // And now fire change event when the DOM is ready 
    $('#myoptions').trigger('change'); 
}); 

Answer 5

सबसे अच्छा तरीका है मैं पाया है विकल्प क्लिक करें घटना

$(document).on('click', 'select#myselect option', function(){ 
     doStuff(this.value); 
}); 

यह कोई बात नहीं क्या पहले से चयन किया जाता है बुलाया जाएगा उपयोग करने के लिए है। और यह आपके चुने हुए नियंत्रण में चयनित विकल्प के रूप में दिखाया गया नहीं है (जो तब होगा जब आप इसे हटाए गए एट्र ('चयनित') के साथ अचयनित करेंगे)