एचटीएमएल का चयन करें - तब भी जब विकल्प नहीं बदला गया है उत्प्रेरक जावास्क्रिप्ट onchange घटना

Question

मैं निम्न मार्कअप है:

<select onchange="jsFunction()"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

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

Answer 1

मैं इस तरह यह करना चाहते हैं:

<select onchange="jsFunction()"> 
    <option value="" disabled selected style="display:none;">Label</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

आप आपको पहले विकल्प है, जो इस मामले में 1. बेहतर भी रूप में एक ही लेबल हो सकता था चाहते हैं: एक लेबल डाल बॉक्स में विकल्पों के लिए वहाँ।

Answer 2

इसे आजमाएं। बस एक खाली विकल्प जोड़ें। यह आपकी समस्या का समाधान करेगा।

<select onchange="jsFunction()"> 
    <option></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select>​ 

Answer 3

यह फायरिंग नहीं है क्योंकि मान "बदला" नहीं है। यह वही मूल्य है। दुर्भाग्यवश, आप change ईवेंट का उपयोग करके वांछित व्यवहार प्राप्त नहीं कर सकते हैं।

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

Answer 4

आप इसे हल करने के लिए खाली विकल्प जोड़ने के लिए है,

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

<select onChange="jsFunction()" id="selectOpt"> 
    <option value="1" onclick="jsFunction()">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

function jsFunction(){ 
    var myselect = document.getElementById("selectOpt"); 
    alert(myselect.options[myselect.selectedIndex].value); 
} 

Answer 5

प्रत्येक विकल्प तत्व के साथ "onmouseup" संपत्ति का उपयोग करें। यह verbose है, लेकिन काम करना चाहिए। भी, क्या आपके समारोह वास्तव में क्या कर रहा है पर निर्भर करता है, आप चीजों को थोड़ा अलग तरह की व्यवस्था कर सकता है, संख्या संभालने हैंडलर में महत्वपूर्ण है:

<select> 
<option onmouseup="handler()" value="1">1</option> //get selected element in handler 
<option onmouseup="handler(2)" value="2">2</option> //explicitly send the value as argument 
<option onmouseup="handler(this.value)" value="3">3</option> //same as above, but using the element's value property and allowing for dynamic option value. you could also send "this.innerHTML" or "this.textContent" to the handler, making option value unnecessary 
</select> 

Answer 6

यह काम करता है:

<select name="type" onmousedown="this.value='';" onchange="alert('Changed.');"> 
    <option value='1'>One</option> 
    <option value='2'>Two</option> 
    <option value='3'>Three</option> 
    <option value='4'>Four</option> 
    <option value='5'>Five</option> 
    <option value='6'>Six</option> 
    <option value='7'>Seven</option> 
    <option value='8'>Eight</option> 
    <option value='9'>Nine</option> 
    <option value='10'>Ten</option> 
</select> 

Answer 7

जावा स्क्रिप्ट कोड:

mousedown घटना पर
• : सेट SelectedIndex संपत्ति के मूल्य परिवर्तन ईवेंट पर -1
• : घटना
संभाल

केवल दोष यह है कि जब उपयोगकर्ता ड्रॉपडाउन सूची पर क्लिक करता है, वर्तमान में चयनित आइटम का चयन किया दिखाई न दे

Answer 8

इस तरह है।

पहला "खाली" है।

<option></option> 
    <option>01</option> 
    <option>02</option> 
    <option>03</option> 
    <option>04</option> 
    <option>05</option> 
    <option>06</option> 
    <option>07</option> 
    <option>08</option> 
    <option>09</option> 
    <option>10</option> 
    <option>11</option> 
    <option>12</option> 

Answer 9

बस अपने प्रसंस्करण घटना के अंतिम चरण के रूप में -1 से जुड़े <select> टैग की selectIndex निर्धारित किया है।

mySelect = document.getElementById("idlist"); 
mySelect.selectedIndex = -1; 

यह हर बार काम करता है, मुख्य आकर्षण को दूर करने और आप एक ही (या अलग) तत्व फिर से चयन करने के लिए अनुमति देता है।