वहाँ एक onSelect घटना या HTML के लिए बराबर है <select>?

Question

मेरे पास एक इनपुट फॉर्म है जो मुझे कई विकल्पों में से चयन करने देता है, और उपयोगकर्ता द्वारा चयन बदलने पर कुछ करना चाहिए । उदाहरण के लिए,

<select onChange="javascript:doSomething();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

अब, doSomething()केवल तभी बदल जाता है जब चयन बदल जाता है ।

मैं ट्रिगर करना चाहता हूं doSomething()जब उपयोगकर्ता किसी भी विकल्प का चयन करता है, संभवतः वही फिर से।

मैंने "onClick" हैंडलर का उपयोग करने की कोशिश की है, लेकिन उपयोगकर्ता द्वारा चयन प्रक्रिया शुरू करने से पहले यह ट्रिगर हो जाता है।

तो, क्या उपयोगकर्ता द्वारा प्रत्येक चयन पर एक फ़ंक्शन को ट्रिगर करने का एक तरीका है?

अपडेट करें:

डैरिल द्वारा सुझाए गए जवाब में काम करने के लिए लग रहा था, लेकिन यह लगातार काम नहीं करता है। जैसे ही उपयोगकर्ता ड्रॉप-डाउन मेनू पर क्लिक करता है, उपयोगकर्ता द्वारा चयन प्रक्रिया पूरी होने से पहले ही घटना शुरू हो जाती है!

Comments

मैं समझ सकता हूं कि आप ऐसा क्यों सोचते हैं। मैं इसे छोटा रखूंगा। मेरे फॉर्म में दो इनपुट हैं। शहर (पाठ क्षेत्र) और राज्य (चयन)। प्रारंभ में, एक शहर और उसका राज्य प्रदर्शित किया जाता है। जब उपयोगकर्ता एक राज्य का चयन करता है, तो एक खोज फ़िल्टर "सिटी-विशिष्ट" के बजाय इसके दायरे को "स्टेट-वाइड" तक विस्तृत करता है।

— ePharaoh

स्ट्रेजर, यह एक असामान्य यूआई तत्व नहीं है। कुछ स्थितियों में सही समझ में आता है। अन्य उदाहरण एक सामूहिक ईमेल की रचना करते हैं, तो आपके पास "विशेष फ़ील्ड" के साथ दाईं ओर एक ड्रॉप डाउन होता है जिसे आप ईमेल में जल्दी जोड़ सकते हैं, पहला नाम, ऑप्ट आउट लिंक, आदि

— ब्रायन आर्मस्ट्रांग

सिर्फ एक साइड नोट के रूप में ... इनलाइन, ऑनकेंज आदि जैसी इनलाइन घटनाओं के लिए आपको "जावास्क्रिप्ट:" प्रोटोकॉल उपसर्ग की आवश्यकता नहीं है। {event} पर "DoSomething ();" = बस ठीक है।

— स्कुललिफ

अप्रयुक्त: कैसे के बारे में पर क्लिक करें, लेकिन विकल्प टैग के लिए आवेदन किया? स्पष्ट रूप से एक वर्ग के माध्यम से, एक विनीत तरीके से

— विघटनकारी

@ Disintegrator केवल क्लिक की घटनाओं का उपयोग करके उपयोग के मामले को संभालने में विफल रहता है जहाँ आप कीबोर्ड के माध्यम से एक विकल्प का चयन करते हैं। (यह

— समझें

Answer 1

यहाँ सबसे आसान तरीका है:

<select name="ab" onchange="if (this.selectedIndex) doSomething();">
    <option value="-1">--</option>
    <option value="1">option 1</option> 
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

माउस चयन और कीबोर्ड दोनों के साथ काम करता है।

Comments

लेकिन यह कुछ भी नहीं करेगा "जब उपयोगकर्ता चयन करता है ... वही फिर से," ठीक है?

— लार्स सेप

ध्यान दें कि @KayZhu से टिप्पणी केवल आधी सही है: करने के लिए सही बात यह है कि "चयनितइंडेक्स" शून्य से अधिक या बराबर (या -1 से अधिक) है। कोई "प्रकार ()" फ़ंक्शन नहीं है, और "सिलेक्टेडइन्डेक्स" कभी undefinedभी नहीं होगा ।

— पोइंट्टी

@TJCrowder आप सही हैं - निश्चित नहीं कि मैं क्या सोच रहा था जब मैंने दूसरी छमाही लिखी थी। मैंने मूल टिप्पणी को हटा दिया है और दूसरों को भ्रमित न करने के उद्देश्य से, यहां मूल टिप्पणी है (कृपया ध्यान दें कि पहला आधा सही है, और दूसरा भाग गलत है): यह पहले विकल्प के लिए अपेक्षित रूप से काम नहीं करेगा जो जेएस में इंडेक्स 0: 0 गलत है, इसलिए doSomething () निष्पादित नहीं किया जाएगा। इसके बजाय, उपयोग करेंif(type(this.selectedIndex) != undefined; doSomething()

— KZ

इस उत्तर में सबसे अधिक उत्थान हैं, लेकिन यह समस्या का समाधान नहीं करता है! doSomething()समारोह ट्रिगर नहीं उपयोगकर्ता पहले से चयनित विकल्प का चयन करता है जब है। इस प्लंक को देखें , जहां पृष्ठभूमि रंग केवल तभी बदलता है जब आप वर्तमान में चुने गए से एक अलग विकल्प चुनते हैं।

— स्कॉट

एफडब्ल्यूआईडब्ल्यू: यदि आप केवल doSomething()एक विशिष्ट विकल्प का चयन करने के लिए आह्वान करना चाहते हैं , उदाहरण के लिए, उदाहरण के लिए "विकल्प 3", उदाहरण के लिए, if (this.selectedIndex==4)जिससे संख्या "4" विकल्पों के संख्यात्मक सूचकांक का प्रतिनिधित्व करती है , निर्दिष्ट नहीं है value! (यानी, "विकल्प 3" चौथा विकल्प है <select name="ab">)।

— आरव्रव

Answer 2

मुझे कुछ वैसा ही चाहिए था। इसी से मेरा काम बना है:

<select onchange="doSomething();" onfocus="this.selectedIndex = -1;">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

इस का समर्थन करता है:

जब उपयोगकर्ता किसी भी विकल्प का चयन करता है, तो संभवतः वही फिर से

Comments

jsfiddle.net/ecmanaut/335XK OSX क्रोम 30, सफारी 6, फ़ायरफ़ॉक्स 17 में काम करता है

— ecmanaut

Win8 IE10, Win7 IE9, Win7 IE8, WinXP IE7 और IE6 में भी काम करता है। Jsfiddle या IE shenanigans आपको fiddle.jshell.net/ecmanaut/335XK/show/light को सीधे-सीधे परीक्षण के लिए उपयोग करने के लिए मजबूर करते हैं , हालांकि - उनका संपादक दृश्य पठनीयता के लिए उदाहरण में उपयोग किए गए jQuery को लोड करने में विफल रहता है। ऊपर सभी सिर्फ माउस बातचीत के साथ परीक्षण किया; इस कीबोर्ड के अनुकूल होने के लिए, इस हैक संभावना को अतिरिक्त काम करने की आवश्यकता है, क्योंकि कम से कम पुराने IE आपको "सी" चुनने का मौका मिलने से पहले परिवर्तन की घटना को खुशी से ट्रिगर करते हैं।

— इक्मानोट

वास्तव में महान टिप,। पहले विकल्प का चयन करने में असमर्थता को हल करने में मेरी मदद की

— नोरू

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

— काइलमीट

मूल चयन को पुनर्स्थापित करने के लिए जैसे jQuery .blur () का उपयोग करें यदि यह फ़ोकस खोने के बिंदु पर -1 है।

— बजे mheinzerling

Answer 3

मुझे एक ही समस्या थी जब मैं कुछ महीने पहले एक डिजाइन बना रहा था। मैंने जो समाधान पाया वह उस तत्व के .live("change", function())साथ संयोजन में उपयोग करना था जिसका .blur()आप उपयोग कर रहे हैं।

आप जब उपयोगकर्ता केवल, क्लिक बजाय बदलने की यह कुछ करना नहीं रखना चाहती हैं, बस की जगह changeके साथ click।

मैंने अपना ड्रॉपडाउन एक आईडी सौंपा selected, और निम्नलिखित का उपयोग किया:

$(function () {
    $("#selected").live("change", function () {

    // do whatever you need to do

    // you want the element to lose focus immediately
    // this is key to get this working.
    $('#selected').blur();
    });
});

मैंने देखा कि यह एक चयनित जवाब नहीं था, इसलिए मुझे लगा कि मैं अपना इनपुट दूंगा। इसने मेरे लिए उत्कृष्ट रूप से काम किया, इसलिए उम्मीद है कि जब वे अटक जाते हैं तो कोई और इस कोड का उपयोग कर सकता है।

http://api.jquery.com/live/

संपादित करें: onचयनकर्ता का विरोध करने के लिए उपयोग करें .live। JQuery .on () देखें

Comments

धन्यवाद! .blur () मदद करता है। IE7 में, कोड में कोई .blur () नहीं होने पर jQuery का परिवर्तन इवेंट दो बार चालू हो जाता है।

— आकर्षित

यह प्रश्न में व्यक्त समस्या के साथ कैसे मदद करता है, यानी कि चयन बदलने तक कुछ नहीं होता है ?

— लार्स

@LarsH इस सवाल को कई साल हो चुके हैं, यकीन नहीं होता - मैंने इस सवाल को गलत पढ़ा होगा और भ्रमित हो सकता हूं।

— कोडी

अब किसी को भी देखने के लिए .live को पूरी तरह से 1.9 api.jquery.com/live/#live-events-handler के रूप में हटा दिया गया है । शॉर्टकट के रूप में .change का प्रयोग करें ai.jquery.com/change/#change-handler

— parttimeturtle

Answer 4

बस एक विचार है, लेकिन क्या <option>तत्वों में से प्रत्येक पर एक ऑन्क्लिक डालना संभव है ?

<select>
  <option onclick="doSomething(this);">A</option>
  <option onclick="doSomething(this);">B</option>
  <option onclick="doSomething(this);">C</option>
</select>

---

एक अन्य विकल्प का चयन करने पर onblur का उपयोग करने के लिए किया जा सकता है। उपयोगकर्ता द्वारा चयन से दूर क्लिक करने पर यह कभी भी फायर कर देगा। इस बिंदु पर आप यह निर्धारित कर सकते हैं कि क्या विकल्प चुना गया था। सही समय पर इसे ट्रिगर करने के लिए, विकल्प का ऑन्कलिक फ़ील्ड को धुंधला कर सकता है (jQuery में कुछ और सक्रिय या सिर्फ .blur () बनाएं)।

Comments

रफ़ू! "मैंने उस पल के बारे में क्यों नहीं सोचा"। धन्यवाद!

— ePharaoh

@Darryl यह वास्तव में उम्मीद के मुताबिक काम नहीं किया। उपयोगकर्ता द्वारा चयन पूरा करने से पहले ही कभी-कभी ईवेंट चालू हो जाता है। उस अद्यतन को देखें जिसे मैंने प्रश्न में जोड़ा है।

— ePharaoh

विकल्प पर इवेंट हैंडलर डालना IE के सभी संस्करणों में विफल हो जाएगा! webbugtrack.blogspot.com/2007/11/…

— scunliffe

क्रोम में भी विफल रहता है :)

— थिंकलिनक्स

फ़ायरफ़ॉक्स में काम करता है।

— lezsakdomi

Answer 5

ऑनक्लिक दृष्टिकोण पूरी तरह से खराब नहीं है लेकिन जैसा कि कहा गया है, जब माउस-क्लिक द्वारा मूल्य नहीं बदला जाता है तो यह ट्रिगर नहीं होगा।
हालांकि ऑनकेंज इवेंट में ऑन्कलिक इवेंट को ट्रिगर करना संभव है।

<select onchange="{doSomething(...);if(this.options[this.selectedIndex].onclick != null){this.options[this.selectedIndex].onclick(this);}}">
    <option onclick="doSomethingElse(...);" value="A">A</option>
    <option onclick="doSomethingElse(..);" value="B">B</option>
    <option onclick="doSomethingElse(..);" value="Foo">C</option>
</select>

Answer 6

जीबिट के उत्तर पर विस्तार करने जा रहे हैं। मुझे यह अजीब लगा जब आपने ड्रॉप डाउन पर क्लिक किया और फिर ड्रॉप डाउन को बिना कुछ चुने ही क्लिक कर दिया। की तर्ज पर कुछ के साथ समाप्त:

var lastSelectedOption = null;

DDChange = function(Dd) {
  //Blur after change so that clicking again without 
  //losing focus re-triggers onfocus.
  Dd.blur();

  //The rest is whatever you want in the change.
  var tcs = $("span.on_change_times");
  tcs.html(+tcs.html() + 1);
  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

DDFocus = function(Dd) {
  lastSelectedOption = Dd.prop("selectedIndex");
  Dd.prop("selectedIndex", -1);

  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

//On blur, set it back to the value before they clicked 
//away without selecting an option.
//
//This is what is typically weird for the user since they 
//might click on the dropdown to look at other options,
//realize they didn't what to change anything, and 
//click off the dropdown.
DDBlur = function(Dd) {
  if (Dd.prop("selectedIndex") === -1)
    Dd.prop("selectedIndex", lastSelectedOption);

  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
}; 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="Dd" onchange="DDChange($(this));" onfocus="DDFocus($(this));" onblur="DDBlur($(this));">
  <option>1</option>
  <option>2</option>
</select>
<br/>
<br/>Selected index: <span class="selected_index"></span>
<br/>Times onchange triggered: <span class="on_change_times">0</span>

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

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

Comments

आप thisइसके बजाय पास होने से प्रोप चेतावनियों से छुटकारा पा सकते हैं $(this)। हालाँकि, मुझे इससे सभी इच्छित व्यवहार नहीं मिलते हैं; जब मैं उसी विकल्प को फिर से चुनता हूं तो यह अलर्ट नहीं होता है।

— नौमेनन

नोट: onchange जेएस के माध्यम से चयन बॉक्स में हटाने के विकल्प जोड़ते समय ट्रिगर किया जाता है। न केवल जब कोई उपयोगकर्ता किसी आइटम का चयन करता है

— zanderwar

@ नौमेनन ने इसमें त्रुटियों को ठीक किया यदि यह अभी भी सहायक है। मुझे लगता है कि मैं इस एप्लिकेशन में ही परीक्षण कर रहा था और जब मैंने इसे कॉपी किया तो मैं एक चर का नाम बदलना भूल गया। संपादक में काम करना चाहिए और अभी और समझ बनाना चाहिए।

— टायलर स्टाह्लथ

Answer 7

यदि आपको वास्तव में इस तरह से काम करने की आवश्यकता है, तो मैं यह करूँगा (यह सुनिश्चित करने के लिए कि यह कीबोर्ड और माउस द्वारा काम करता है)

• "चालू" मान सेट करने के लिए चयन के लिए एक ऑनफोकस इवेंट हैंडलर जोड़ें
• माउस परिवर्तनों को संभालने के लिए चयन पर एक ऑनक्लिक ईवेंट हैंडलर जोड़ें
• कीबोर्ड परिवर्तनों को संभालने के लिए चयन के लिए ऑनकीप्रेस ईवेंट हैंडलर जोड़ें

दुर्भाग्य से onclick कई बार चलेगा (जैसे कि सिलेक्ट करने पर ... और सिलेक्शन / क्लोज़ पर) और onkeypress में आग लग सकती है जब कुछ भी नहीं बदलता है ...

<script>
  function setInitial(obj){
    obj._initValue = obj.value;
  }
  function doSomething(obj){
    //if you want to verify a change took place...
    if(obj._initValue == obj.value){
      //do nothing, no actual change occurred...
      //or in your case if you want to make a minor update
      doMinorUpdate();
    } else {
      //change happened
      getNewData(obj.value);
    }
  }
</script>


<select onfocus="setInitial(this);" onclick="doSomething();" onkeypress="doSomething();">
  ...
</select>

Answer 8

हर बार किसी घटना को ठीक से फायर करने के लिए जब उपयोगकर्ता कुछ (यहां तक ​​कि एक ही विकल्प) का चयन करता है, तो आपको बस चयन बॉक्स को ट्रिक करने की आवश्यकता होती है।

जैसा कि दूसरों ने कहा है, selectedIndexपरिवर्तन की घटना को बल देने के लिए फोकस पर एक नकारात्मक निर्दिष्ट करें । हालांकि यह आपको सेलेक्ट बॉक्स को ट्रिक करने की अनुमति देता है, लेकिन यह तब तक काम नहीं करेगा जब तक कि यह अभी भी फोकस है। सरल फिक्स को चुनिंदा बॉक्स को धुंधला करने के लिए मजबूर करना है, जो नीचे दिखाया गया है।

मानक JS / HTML:

<select onchange="myCallback();" onfocus="this.selectedIndex=-1;this.blur();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

jQuery प्लगइन:

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script type="text/javascript">
    $.fn.alwaysChange = function(callback) {
        return this.each(function(){
            var elem = this;
            var $this = $(this);

            $this.change(function(){
                if(callback) callback($this.val());
            }).focus(function(){
                elem.selectedIndex = -1;
                elem.blur();
            });
        });
    }


    $('select').alwaysChange(function(val){
        // Optional change event callback,
        //    shorthand for $('select').alwaysChange().change(function(){});
    });
</script>

आप यहां एक कार्यशील डेमो देख सकते हैं ।

Comments

यह क्रोम के साथ काम करता है, लेकिन IE9 के साथ नहीं: जब मैं नियंत्रण पर क्लिक करता हूं, तो इसका पाठ गायब हो जाता है और यह ड्रॉप-डाउन नहीं होता है।

— क्रिस डब्ल्यूपी

इसके साथ समस्या यह है कि यह वर्तमान चयन को नुक्कड़ करती है। यदि वर्तमान चयन B है और मैं पुलडाउन पर क्लिक करता हूं, तो चेकमार्क A के बगल में दिखता है! लेकिन ए वास्तव में चयनित नहीं है, क्योंकि अगर मैं मेनू को बंद कर देता हूं और माउस बटन को छोड़ता हूं (मेनू को समाप्त कर देता है) तो चयन रिक्त हो जाता है। यदि आप पुलडाउन से टैब करते हैं, तो चयन भी खाली हो जाता है, जो आप आसानी से कर सकते हैं यदि आप फॉर्म के किसी अन्य हिस्से के माध्यम से टैब कर रहे हैं, तो रास्ते में किसी भी नुकसान की उम्मीद नहीं है। (अपने jsfiddle पर प्रेस टैब और आप देखेंगे कि मैं क्या मतलब है।)

— स्कॉट

Answer 9

दरअसल, उपयोगकर्ता द्वारा चयन नियंत्रण में चयन को बदलने के लिए कीबोर्ड का उपयोग करने पर ऑनक्लिक ईवेंट आग नहीं लगेंगे। आपको वह व्यवहार प्राप्त करने के लिए onChange और onClick के संयोजन का उपयोग करना पड़ सकता है जिसे आप खोज रहे हैं।

Comments

हां, मुझे करना होगा .. लेकिन मैं जिस समस्या का सामना कर रहा हूं वह आपके द्वारा उठाए गए चिंता के लिए एक अलग ऑर्थोगोनल है। उपयोगकर्ता द्वारा अपना चयन पूरा करने से पहले ही <option> पर ऑनक्लिक ईवेंट को निकाल दिया जा रहा है, जिसका उपयोग करना असंभव लगता है।

— ePharaoh

जब आप किसी नए आइटम के लिए चयन को स्थानांतरित करने के बाद प्रवेश करते हैं तो Chrome में आग की घटनाएँ होती हैं

— Gene Golovchinsky

Answer 10

यह सीधे आपके प्रश्न का उत्तर नहीं दे सकता है, लेकिन इस समस्या को सरल डिजाइन स्तर समायोजन द्वारा हल किया जा सकता है। मैं समझता हूं कि यह सभी उपयोग के मामलों के लिए 100% लागू नहीं हो सकता है, लेकिन मैं दृढ़ता से आपसे आग्रह करता हूं कि आप अपने आवेदन के उपयोगकर्ता प्रवाह पर फिर से विचार करें और यदि निम्नलिखित डिजाइन सुझाव को लागू किया जा सकता है।

मैं के लिए विकल्प की हैकिंग से कुछ सरल करने के लिए फैसला किया है onChange()अन्य घटनाओं है कि वास्तव में इस उद्देश्य के लिए नहीं किया गया था का उपयोग कर ( blur, clickआदि)

जिस तरह से मैंने इसे हल किया:

बस प्लेसहोल्डर ऑप्शन टैग को प्री-पेंड करें जैसे चयन करें जिसका कोई मूल्य नहीं है।

इसलिए, केवल निम्न संरचना का उपयोग करने के बजाय, जिसमें हैक-वाई विकल्प की आवश्यकता होती है:

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

इसका उपयोग करने पर विचार करें:

<select>
  <option selected="selected">Select...</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

तो, इस तरह, आपका कोड बहुत अधिक सरलीकृत है और यह onChangeअपेक्षा के अनुरूप काम करेगा, हर बार जब उपयोगकर्ता डिफ़ॉल्ट मान के अलावा किसी अन्य चीज का चयन करने का निर्णय लेता है। आप disabledपहले विकल्प में भी विशेषता जोड़ सकते हैं यदि आप उन्हें फिर से चुनना नहीं चाहते हैं और उन्हें विकल्पों में से कुछ चुनने के लिए मजबूर कर सकते हैं, तो इस तरह से onChange()आग लग सकती है।

इस उत्तर के समय, मैं एक जटिल Vue एप्लिकेशन लिख रहा हूं और मैंने पाया कि इस डिज़ाइन की पसंद ने मेरे कोड को बहुत सरल कर दिया है। इस समस्या का समाधान करने से पहले मैंने इस समस्या पर घंटों बिताए और मुझे अपने कोड को दोबारा लिखना नहीं पड़ा। हालाँकि, अगर मैं हैकी विकल्पों के साथ गया था, तो मुझे एज मामलों के लिए फायरिंग को रोकने की आवश्यकता होगी, अजाक्स अनुरोधों की दोहरी गोलीबारी को रोकने के लिए, आदि। यह एक अच्छा बोनस के रूप में डिफ़ॉल्ट ब्राउज़र व्यवहार को गड़बड़ नहीं करता है (मोबाइल पर परीक्षण किया गया) साथ ही ब्राउज़र)।

कभी-कभी, आपको बस एक कदम वापस लेने की जरूरत है और सबसे सरल समाधान के लिए बड़ी तस्वीर के बारे में सोचना चाहिए।

Answer 11

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

Answer 12

इसलिए मेरा लक्ष्य कई बार एक ही मूल्य का चयन करने में सक्षम होना था जो अनिवार्य रूप से ऑन्चेंज () फ़ंक्शन को अधिलेखित करता है और इसे एक उपयोगी ऑन्कलिक () विधि में बदल देता है।

ऊपर दिए गए सुझावों के आधार पर मैं इसे लेकर आया जो मेरे लिए काम करता है।

<select name="ab" id="hi" onchange="if (typeof(this.selectedIndex) != undefined) {alert($('#hi').val()); this.blur();}" onfocus="this.selectedIndex = -1;">
    <option value="-1">--</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

http://jsfiddle.net/dR9tH/19/

Comments

अन्य onfocus="this.selectedIndex=-1"समाधानों की तरह ही कमियां : यदि आप घटक को टैब करते हैं, या यदि आप कुछ भी चयन किए बिना मेनू बंद करते हैं, तो वर्तमान चयन शून्य हो जाता है। अपने फिडेल पर टैब दबाकर देखें कि मेरा क्या मतलब है। (यह भी ध्यान दें कि आपको खाली मान मिलता है और ऐसा करने पर '-' नहीं है। ऐसा इसलिए selectedIndex=-1है क्योंकि आप <option value="-1">इसे प्राप्त नहीं करते हैं ; यह उपयोग करने के लिए यहां एक मामूली सुधार होगा onfocus="this.selectedIndex=0"। यह एक आधा-सभ्य वर्कअराउंड है, लेकिन मैं नहीं। वर्तमान चयन को खो देने की तरह, क्योंकि मैंने मेन्यू में झाँक कर देखा, या यहाँ तक कि इसमें केवल टैब किया।

— '21:

Answer 13

एक इवेंट हैंडलर के रूप में सबसे पहले यू ऑनचेंज करें और फिर फंक्शन वेरिएबल का उपयोग करें ताकि आप हर बार यू चाहते हैं कि यह बदलाव आए

<select

var list = document.getElementById("list");
var flag = true ; 
list.onchange = function () {
if(flag){
document.bgColor ="red";
flag = false;

}else{
document.bgColor ="green";
flag = true;
}
}

<select id="list"> 
<option>op1</option>
<option>op2</option>
<option>op3</option>
</select>

Answer 14

कॉलम के हेडर की तरह पहले एक अतिरिक्त विकल्प जोड़ें, जो ड्रॉपडाउन बटन का डिफ़ॉल्ट मूल्य होगा, इसे क्लिक करने से पहले रीसेट करें और अंत में रीसेट करें doSomething(), इसलिए जब ए / बी / सी चुनते हैं, तो ऑन्चेंज ईवेंट हमेशा ट्रिग करता है, जब चयन हो State, तो कुछ न करें और वापस लौट आएं। onclickबहुत अस्थिर है जैसा कि कई लोगों ने पहले उल्लेख किया है। इसलिए हम सभी को एक प्रारंभिक बटन लेबल बनाने की आवश्यकता है जो कि आपके असली विकल्पों के रूप में अलग है इसलिए onchange किसी भी विकल्प पर काम करेगा।

<select id="btnState" onchange="doSomething(this)">
  <option value="State" selected="selected">State</option>  
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>


function doSomething(obj)
{
    var btnValue = obj.options[obj.selectedIndex].value;

    if (btnValue == "State")
    {
      //do nothing
      return;
    }

    // Do your thing here

    // reset 
    obj.selectedIndex = 0;
}

Answer 15

चयन टैग (इस परिदृश्य में) के बारे में आश्चर्यजनक बात यह है कि यह विकल्प टैग से इसका मूल्य हड़प लेगा।

प्रयत्न:

<select onChange="javascript:doSomething(this.value);">
<option value="A">A</option>
<option value="B">B</option>
<option value="Foo">C</option>
</select>

मेरे लिए सभ्य काम किया।

Answer 16

jquery का उपयोग करें:

<select class="target">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script>
    $('.target').change(function() { doSomething(); });
</script>

Answer 17

यहाँ मेरा समाधान है, यहाँ पर किसी भी तरह से पूरी तरह से अलग है। यह पता लगाने के लिए माउस स्थिति का उपयोग करता है कि ड्रॉपडाउन को खोलने के लिए चयन बॉक्स पर क्लिक करने के विकल्प के रूप में क्लिक किया गया था। यह event.screenY स्थिति का उपयोग करता है क्योंकि यह एकमात्र विश्वसनीय क्रॉस ब्राउज़र चर है। होवर ईवेंट को पहले संलग्न किया जाना है ताकि यह क्लिक इवेंट से पहले स्क्रीन के सापेक्ष नियंत्रण स्थिति का पता लगा सके।

var select = $("select");

var screenDif = 0;
select.bind("hover", function (e) {
    screenDif = e.screenY - e.clientY;
});
select.bind("click", function (e) {
    var element = $(e.target);
    var eventHorizon = screenDif + element.offset().top + element.height() - $(window).scrollTop();
    if (e.screenY > eventHorizon)
        alert("option clicked");
});

यहाँ मेरा jsFiddle http://jsfiddle.net/sU7EV/4/ है

Comments

OS X के लिए Safari या Chrome में काम नहीं करता। अलर्ट को कभी ट्रिगर नहीं किया जाता है।

— स्कॉट

Answer 18

आपको प्रयोग करके देखना चाहिए option:selected

$("select option:selected").click(doSomething);

Answer 19

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

<select id='myID' onchange='doSomething();'>
    <option value='0' selected> Select Option </option>
    <option value='1' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > A </option>
    <option value='2' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > B </option>
</select>

इस तरह, जब ऑप्शन बदलता है, तब onchange 'doSomething ()' कॉल करता है, और जब onchange ईवेंट झूठा होता है, तो 'doSomething ()' कॉल को दूसरे शब्दों में, जब आप एक ही विकल्प चुनते हैं।

Comments

Safari या Chrome ओएस एक्स के लिए में मेरे लिए नहीं काम करता है jsfiddle.net/drskot/wLvL4pkw

— स्कॉट

Answer 20

इसे आज़माएं (जब आप विकल्प चुनते हैं, तो विकल्प बदले बिना घटना पूरी तरह से शुरू हो जाती है):

$("select").mouseup(function() {
    var open = $(this).data("isopen");
    if(open) {
        alert('selected');
    }
    $(this).data("isopen", !open);
});

http://jsbin.com/dowoloka/4

Answer 21

<script>
function abc(selectedguy) {
alert(selectedguy);
}
</script>

<select onchange="abc(this.selectedIndex);">
<option>option one</option>
<option>option two</option>
</select>

यहां आपके पास इंडेक्स वापस आ गया है, और js कोड में आप इस रिटर्न का उपयोग एक स्विच या अपनी इच्छित किसी भी चीज़ के साथ कर सकते हैं।

Answer 22

इसे इस्तेमाल करे:

<select id="nameSelect" onfocus="javascript:document.getElementById('nameSelect').selectedIndex=-1;" onchange="doSomething(this);">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

Answer 23

अभी कुछ समय पहले लेकिन मूल प्रश्न के उत्तर में, क्या यह मदद करेगा? बस डाल onClickमें SELECTलाइन। फिर आप लाइनों OPTIONमें प्रत्येक क्या करना चाहते हैं डाल दिया OPTION। अर्थात:

<SELECT name="your name" onClick>
<option value ="Kilometres" onClick="YourFunction()">Kilometres
-------
-------
</SELECT>

Answer 24

<select name="test[]" 
onchange="if(this.selectedIndex < 1){this.options[this.selectedIndex].selected = !1}">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

Answer 25

मुझे इसी तरह की आवश्यकता का सामना करना पड़ा और उसी के लिए एक कोणीय निर्देश लिखने का अंत हुआ -

गुथब लिंक - कोणीय चयन

element[0].blur();चयन टैग से ध्यान हटाने के लिए उपयोग किया जाता है। तर्क ड्रॉपडाउन के दूसरे क्लिक पर इस कलंक को ट्रिगर करना है।

as-select जब उपयोगकर्ता ड्रॉपडाउन में समान मूल्य का चयन करता है तब भी ट्रिगर हो जाता है।

डेमो - लिंक

Answer 26

एक सच्चा उत्तर चुनिंदा फ़ील्ड का उपयोग न करने के लिए है (यदि आपको उसी उत्तर को फिर से चुनने पर कुछ करने की आवश्यकता है।)

पारंपरिक div, बटन, शो / छिपाने मेनू के साथ एक ड्रॉपडाउन मेनू बनाएं। लिंक: https://www.w3schools.com/howto/howto_js_dropdown.asp

टाला जा सकता था एक घटना श्रोताओं को विकल्पों में जोड़ने में सक्षम था। अगर वहाँ का चयन तत्व के लिए एक onSelect श्रोता था। और अगर चुनिंदा फ़ील्ड पर क्लिक करने से मूसडाउन, माउसअप बंद हो जाता है, और मूसडाउन पर एक ही समय में क्लिक करें।

Answer 27

कुछ चीजें हैं जो आप यहां करना चाहते हैं, यह सुनिश्चित करने के लिए कि यह पुराने मूल्यों को याद करता है और एक ऑन्चेंज घटना को ट्रिगर करता है, भले ही उसी विकल्प को फिर से चुना गया हो।

पहली चीज़ जो आप चाहते हैं, वह एक नियमित रूप से चालू होने वाली घटना है:

$("#selectbox").on("change", function(){
    console.log($(this).val());
    doSomething();
});

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

prev_select_option = ""; //some kind of global var

$("#selectbox").on("focus", function(){
    prev_select_option = $(this).val(); //store currently selected value
    $(this).val("unknown"); //set to an invalid value
});

उपरोक्त कोड आपको उसी मूल्य का चयन करने पर भी ऑनक्रास को ट्रिगर करने की अनुमति देगा। हालांकि, यदि उपयोगकर्ता चयन बॉक्स के बाहर क्लिक करता है, तो आप पिछले मूल्य को पुनर्स्थापित करना चाहते हैं। हम इसे onBlur पर करते हैं:

$("#selectbox").on("blur", function(){
    if ($(this).val() == null) { 
       //because we previously set an invalid value 
       //and user did not select any option
        $(this).val(prev_select_option);
    }
});

Answer 28

कृपया ध्यान दें कि इवेंट हैंडलर्स IE पर विकल्प टैग के लिए समर्थित नहीं हैं, एक त्वरित सोच के साथ..मैं इस समाधान के साथ आया, इसे आज़माएं और मुझे अपनी प्रतिक्रिया दें:

<script>
var flag = true;
function resetIndex(selObj) {
    if(flag) selObj.selectedIndex = -1;
    flag = true;
}
function doSomething(selObj) {
    alert(selObj.value)
    flag = false;
}
</script>
<select onchange="doSomething(this)" onclick="resetIndex(this)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

जो मैं यहां कर रहा हूं, वह वास्तव में चुनिंदा इंडेक्स को रीसेट कर रहा है, ताकि ऑन्चेंज ईवेंट हमेशा ट्रिगर हो जाए, यह सच है कि आप क्लिक करने पर चयनित आइटम खो देते हैं और यदि आपकी सूची लंबी है, तो यह आपको परेशान कर सकता है, लेकिन यह किसी और में आपकी मदद कर सकता है। ..

Answer 29

तत्व के फ़ोकस होने पर चयन के मूल्य को बदलने के बारे में क्या, उदाहरण के लिए (jquery के साथ):

$("#locationtype").focus(function() {
    $("#locationtype").val('');
});

$("#locationtype").change(function() {
    if($("#locationtype").val() == 1) {
        $(".bd #mapphp").addClass('show');
        $("#invoerform").addClass('hide');
    }
    if($("#locationtype").val() == 2) {
        $(".lat").val('');
        $(".lon").val('');
    }
});

Answer 30

मुझे इसका हल पता चला।

प्रारंभ में चयनित तत्व के selectIndex को सेट करें

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

इस पद्धति को onChange इवेंट पर कॉल करें