मैं एक चुनिंदा तत्व को एक डिफ़ॉल्ट विकल्प रखना चाहता हूं जो चयनित होने पर पॉपअप दिखाता है। तो मैंने 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>
1
Olafvolafka 26 जिंदा 2022, 21:22
मैंने अपना कोड अपडेट किया और अब यह सभी ब्राउज़रों के लिए काम करता है। stackoverflow.com/a/70875801/14807111
 – 
Maik Lowrey
27 जिंदा 2022, 16:23

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।

2
Maik Lowrey 28 जिंदा 2022, 16:51
आपका समाधान काम करता है (हालाँकि इसमें कुछ खामियाँ हैं), लेकिन आपका उत्तर मेरे प्रारंभिक प्रश्न का उत्तर नहीं देता है और यह है: क्या किसी विकल्प पर क्लिक किए जाने पर किसी ईवेंट को ट्रिगर करना संभव है?
 – 
Olafvolafka
28 जिंदा 2022, 15:34
केवल फ़ायरफ़ॉक्स में ही यह संभव नहीं होगा। मेरा पहला उत्तर और चैट से बातचीत देखें।
 – 
Maik Lowrey
28 जिंदा 2022, 16:02
1
मैं जानता हूँ। मैं सिर्फ यह इंगित कर रहा था कि यह जानकारी आपके उत्तर में गुम है;) यदि आप मेरे प्रश्न का पूरी तरह उत्तर देने के लिए अपना उत्तर अपडेट करते हैं तो मैं इसे स्वीकार करूंगा।
 – 
Olafvolafka
28 जिंदा 2022, 16:30
1
मैंने अपना उत्तर अपडेट किया (नोट जोड़ें)। यह दरार करने के लिए एक कठिन अखरोट था! मर्सी और चीयर्स
 – 
Maik Lowrey
28 जिंदा 2022, 16:52

आप श्रोता को चुनिंदा तत्व पर रखेंगे और मूल्य की जांच करेंगे (बजाय श्रोता को सीधे विकल्प तत्व पर रखने के लिए)

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>
0
Kinglish 26 जिंदा 2022, 21:31
यह बिल्कुल वैसा नहीं है जिसे मैं हासिल करने की कोशिश कर रहा हूं। यह केवल तभी काम करता है जब चयनित विकल्प बदल दिया जाता है। मेरा लक्ष्य डिफ़ॉल्ट विकल्प का चयन करने के बाद कुछ कार्रवाई करना है, भले ही वह पहले से ही चुना गया हो।
 – 
Olafvolafka
26 जिंदा 2022, 23:13

आपका कोड काम कर रहा है। 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>
0
Maik Lowrey 26 जिंदा 2022, 21:32