मैं एक चुनिंदा तत्व को एक डिफ़ॉल्ट विकल्प रखना चाहता हूं जो चयनित होने पर पॉपअप दिखाता है। तो मैंने HTMLOptionElement बनाया है और ईवेंट श्रोता पर क्लिक करने के लिए एक ईवेंट जोड़ें लेकिन जब विकल्प क्लिक किया जाता है तो ईवेंट ट्रिगर नहीं होता है।
यहाँ मेरा कोड है:
const selectDefaultOption = new Option(".. show popup ...");
selectDefaultOption.addEventListener("mouseup", () => {
// ... show pop up
});
document.querySelector("#select").appendChild(selectDefaultOption);
क्या मुझसे कुछ गलत हो रही है? या मैं जो हासिल करने की कोशिश कर रहा हूं उसे हासिल करना संभव नहीं है?
निष्कर्ष और समाधान
कुछ प्रयासों के बाद मैं इस निष्कर्ष पर पहुंचा कि किसी चुनिंदा विकल्प से जुड़ी घटना को ट्रिगर करने के लिए कोई साफ समाधान नहीं है।
हालांकि, जब विशिष्ट विकल्प चुना जाता है तो मैं एक क्रिया करने में कामयाब रहा हूं (हालांकि यह उतना सुरुचिपूर्ण नहीं है जितना मेरा प्रारंभिक इरादा था)।
समाधान:
const selectElement = document.querySelector("#select");
const placeholderOption = new Option("<< select option >>", "<< select option >>", true, true);
placeholderOption.style.display = "none"; // this option is never display in the selection and serves only as a placeholder
selectElement.add(placeholderOption, null);
const onclickOption = new Option("onclick option", "onclick option")
onclickOption.onclick = () => alert("onlick option clicked!");
selectElement.add(onclickOption, null);
let previousSelectedValue;
selectElement.onmouseenter = event => {
previousSelectedValue = event.target.value;
event.target.value = placeholderOption.value;
event.target.onmouseleave = event => {
event.target.value = previousSelectedValue;
};
}
selectElement.oninput = event => {
event.target.onmouseleave = undefined; // reset the onmouseleave so it doesn't change current value
const selectedOption = event.target.selectedOptions[0];
if (selectedOption.onclick){
selectedOption.onclick(selectedOption.event);
event.target.value = previousSelectedValue; // you may assign placeholderOption.value
}
};<select id="select">
<option>option#1</option>
<option>option#2</option>
</select>3 जवाब
सबसे पहले मैं ईवेंट लिस्टनर को चुनिंदा कंटेनर में जोड़ता हूं। ट्रिगर के रूप में मैंने फोकस किया। फिर मैं एक नया विकल्प तत्व बनाने के लिए आपके कोड का उपयोग करता हूं। यह तत्व मैं एक नया ईवेंट लिस्टनर असाइन करता हूं जो अलर्ट() को ट्रिगर करता है।
सभी ब्राउज़रों के लिए अपडेट
किसी बनाए गए तत्व पर विकल्प टैग पर असाइन किया गया EventListener अधिकांश ब्राउज़रों पर विफल हो जाएगा। इसलिए EventListerner को Select Tag से जोड़ना सही है। फिर आप जांच सकते हैं कि यह वैल्यू फील्ड के जरिए कौन सा फील्ड है।
const s = document.getElementById('select');
let isLoaded = false;
s.addEventListener('focus', () => {
if (! isLoaded) {
const selectDefaultOption = new Option(".. show popup ...");
selectDefaultOption.setAttribute('value', "popup");
s.appendChild(selectDefaultOption);
}
isLoaded = true;
});
function callPopUp(event) {
let s = document.getElementById('select');
if (s.value === 'popup') {
alert('PopUp')
}
}select {
width: 200px;
background: gray;
padding:10px;
}<select id="select" onclick='callPopUp(event)'>
<option value="123">123</option>
<option value="456">456</option>
</select>नोट
@Olafvolafka के साथ मिलकर हमने पाया कि अधिकांश ब्राउज़रों (क्रोम, ओपेरा) में किसी ईवेंट को विकल्प टैग/तत्व से सफलतापूर्वक बाँधना संभव नहीं है। कोई घटना ट्रिगर नहीं हुई थी। केवल फ़ायरफ़ॉक्स में ही एक घटना शुरू हुई थी। इसलिए, हमें वर्कअराउंड के साथ काम करना होगा। स्थिति 01/2022।
आप श्रोता को चुनिंदा तत्व पर रखेंगे और मूल्य की जांच करेंगे (बजाय श्रोता को सीधे विकल्प तत्व पर रखने के लिए)
document.querySelector('select').addEventListener('change', e => {
if (e.target.value === '2') console.log('The special option was chosen');
})<select>
<option value='1'>1</option>
<option value='2'>Special</option>
<option value='3'>3</option>
</select>आपका कोड काम कर रहा है। mouseup के साथ
माउसअप इवेंट को एलीमेंट पर तब सक्रिय किया जाता है जब किसी पॉइंटिंग डिवाइस (जैसे माउस या ट्रैकपैड) पर एक बटन छोड़ा जाता है, जबकि पॉइंटर उसके अंदर स्थित होता है।
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event
const selectDefaultOption = new Option(".. show popup ...");
selectDefaultOption.addEventListener("mouseup", () => {
alert()
});
document.querySelector("#select").appendChild(selectDefaultOption);option {
width: 200px;
background: gray;
}<div id="select">
<option>123</option>
</select>