এইচটিএমএল <সিলেক্ট> এর জন্য একটি অনসलेक्ट ইভেন্ট বা সমতুল্য কি আছে?

Question

আমার কাছে একটি ইনপুট ফর্ম রয়েছে যা আমাকে একাধিক বিকল্প থেকে নির্বাচন করতে দেয় এবং যখন ব্যবহারকারী নির্বাচন পরিবর্তন করে। যেমন,

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

এখন, doSomething()শুধুমাত্র নির্বাচন পরিবর্তন হলে ট্রিগার করা হয় ।

আমি ট্রিগার চান doSomething()ব্যবহারকারী কোনো বিকল্প, সম্ভবত নির্বাচন যখন একই এক আবার।

আমি একটি "অনক্লিক" হ্যান্ডলারটি ব্যবহার করার চেষ্টা করেছি, তবে ব্যবহারকারী নির্বাচনের প্রক্রিয়া শুরু করার আগে এটি ট্রিগার হয়ে যায়।

সুতরাং, ব্যবহারকারীর দ্বারা প্রতিটি নির্বাচনের উপর কোনও ফাংশন ট্রিগার করার কোনও উপায় আছে কি?

হালনাগাদ:

ড্যারিলের প্রস্তাবিত উত্তরটি কাজ করে বলে মনে হয়েছিল, তবে এটি ধারাবাহিকভাবে কাজ করে না। কখনও কখনও ইভেন্টটি ড্রপ-ডাউন মেনুতে ক্লিক করার সাথে সাথে ইভেন্টটি ট্রিগার হয়ে যায়, এমনকি ব্যবহারকারী নির্বাচনের প্রক্রিয়াটি শেষ করার আগেই!

Comments

আমি বুঝতে পারি আপনি কেন এমন ভাবছেন। আমি এটি সংক্ষিপ্ত রাখব। আমার ফর্মটিতে দুটি ইনপুট রয়েছে। শহর (পাঠ্য ক্ষেত্র) এবং রাজ্য (নির্বাচন)। প্রাথমিকভাবে, একটি শহর এবং এর রাজ্য প্রদর্শিত হয়। যখন ব্যবহারকারী কোনও রাজ্য নির্বাচন করেন, কোনও অনুসন্ধান ফিল্টার কোথাও "সিটি-সুনির্দিষ্ট" পরিবর্তে "স্টেট-ওয়াইড" এ তার সুযোগটি প্রসারিত করে।

— ফেরাউন

স্ট্র্যাগার, এটি কোনও অস্বাভাবিক UI উপাদান নয়। কিছু পরিস্থিতিতে নিখুঁত জ্ঞান তোলে। পরাগধানী উদাহরণ একটি গণ ইমেল রচনা হবে তারপর, আপনি "বিশেষ ক্ষেত্র" সঙ্গে ডান দিকে একটি ড্রপ ডাউন আপনাকে ইমেইল, প্রথম নাম, লিঙ্ক অনির্বাচন ইত্যাদি মধ্যে দ্রুত যুক্ত করতে পারেন আছে

— ব্রায়ান আর্মস্ট্রং

সাইড নোট হিসাবে ... অনক্লিক, অনচেঞ্জ ইত্যাদির মতো ইনলাইন ইভেন্টগুলির জন্য আপনার "জাভাস্ক্রিপ্ট:" প্রোটোকল উপসর্গের দরকার নেই। {ঘটনা} এ "doSomething ();" = ঠিক আছে।

— স্ক্যানলিফ

অপরিশোধিত: অনক্লিক সম্পর্কে কীভাবে তবে বিকল্প ট্যাগগুলিতে প্রয়োগ করা হয়? স্পষ্টতই একটি শ্রেণীর মাধ্যমে, একটি আপত্তিহীন উপায়ে

— দ্য বিচ্ছিন্নকারী

@ বিচ্ছিন্নকারী কেবল ক্লিক ইভেন্টগুলি ব্যবহার করে আপনি কীবোর্ডের মাধ্যমে কোনও বিকল্প নির্বাচন করলে ব্যবহারের ক্ষেত্রে পরিচালনা করতে ব্যর্থ হয়। (উপলব্ধি করুন এটি একটি প্রাচীন প্রশ্ন - ভবিষ্যতের দর্শনার্থীদের জন্য যোগ করা ...)

— পিটার্পিটার

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

তবে এটি কিছুই করবে না "যখন ব্যবহারকারী নির্বাচন করেন ... আবার একইটি" ডান?

— LarsH

নোট করুন যে @ কেযুহু থেকে দেওয়া মন্তব্যটি কেবলমাত্র অর্ধেক সঠিক: সঠিক জিনিসটি যাচাই করতে হবে যে "নির্বাচিত ইন্ডেক্স" শূন্যের চেয়ে বড় (বা -1 এর চেয়ে বড়) is এখানে কোনও "টাইপ ()" ফাংশন নেই, এবং "নির্বাচিত ইন্ডেক্স" undefinedকোনওভাবেই হবে না।

— পয়েন্টি

@ টিজে ক্রাউডার আপনি সঠিক - দ্বিতীয়ার্ধটি লেখার সময় আমি কী ভাবছিলাম তা নিশ্চিত নন। আমি মূল মন্তব্যটি মুছে ফেলেছি এবং অন্যকে বিভ্রান্ত না করার উদ্দেশ্যে, এখানে মূল মন্তব্যটি রয়েছে (দয়া করে মনে রাখবেন যে প্রথমার্ধটি সঠিক, এবং দ্বিতীয় অংশটি ভুল): এটি প্রথম বিকল্পের জন্য প্রত্যাশার মতো কাজ করবে না যা ইনডেক্স 0: 0 জেএসে মিথ্যা তাই doSomething () কার্যকর করা হবে না। পরিবর্তে, ব্যবহার করুনif(type(this.selectedIndex) != undefined; doSomething()

— কেজেড

এই উত্তরের সর্বাধিক উত্সাহ রয়েছে, তবে এটি সমস্যার সমাধান করে না! doSomething()ফাংশন আলোড়ন সৃষ্টি না ব্যবহারকারী ইতিমধ্যে-নির্বাচিত বিকল্প নির্বাচন যখন হয়। এই প্লাঙ্কটি দেখুন , যেখানে আপনি বর্তমানে নির্বাচিতটির চেয়ে আলাদা বিকল্প নির্বাচন করলে পটভূমির রঙই পরিবর্তন হয় ।

— স্কট

এফডাব্লুআইডাব্লু: doSomething()উপরোক্ত উদাহরণের মধ্যে একটি নির্দিষ্ট বিকল্প নির্বাচন করা হলে আপনি কেবলই অনুরোধ করতে চান , উদাহরণস্বরূপ "বিকল্প 3" উদাহরণস্বরূপ, if (this.selectedIndex==4)"4" নম্বরটি বিকল্পগুলির সংখ্যার সূচককে প্রতিনিধিত্ব করে , নির্দিষ্ট নয় value! (যেমন, "বিকল্প 3" এর চতুর্থ বিকল্প <select name="ab">)।

— rvrvrv

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

উইন 8 আই 10, উইন 7 আই 9, উইন 7 আই 8, উইন এক্সপি আই 7 এবং আই 6 এও কাজ করে। জাস্টফিডেল বা আই শেননিগানস আপনাকে কেবলমাত্র-পরীক্ষা-র জন্য সরাসরি fiddle.jshell.net/ecmanaut/335XK/show/light ব্যবহার করতে বাধ্য করে , যদিও - তাদের সম্পাদক দর্শনটি পাঠযোগ্যতার জন্য উদাহরণে ব্যবহৃত jQuery লোড করতে ব্যর্থ হয়। উপরের সমস্তগুলি কেবল মাউস ইন্টারঅ্যাকশন দিয়ে পরীক্ষা করা হয়েছে; এই কীবোর্ডকে বন্ধুত্বপূর্ণ করতে এই হ্যাকটির জন্য সম্ভবত অতিরিক্ত কাজ করা দরকার, কমপক্ষে পুরানো আইইগুলি পছন্দসই "সি" এ যাওয়ার সুযোগ পাওয়ার আগেই পরিবর্তিতভাবে ইভেন্টটি পরিবর্তন করে।

— ইকমানাট

সত্যিই দুর্দান্ত টিপ,। প্রথম বিকল্পটি নির্বাচন করতে অক্ষমতার সমাধান করতে আমাকে সহায়তা করেছে

— নওরো

যদি কোনও মান ইতিমধ্যে নির্বাচিত হয়, তবে এটির মাধ্যমে ট্যাব করা সমস্যার কারণ হবে। ফিল্ডটি নেভিগেট হওয়ার সাথে সাথে মানটিতে অদৃশ্য হয়ে যাবে যা একটি দুর্দান্ত অপ্রত্যাশিত ব্যবহারকারীর আচরণ। এছাড়াও, আপনি যখন ট্যাব অফ করবেন, আপনি বাছাইটি হারিয়ে ফেলবেন, যদিও আপনি বাছাই করে কিছু করেন নি। অন্যথায়, ভাল ধারণা।

— কাইলমিট

ফোকাসটি হ্রাস করার পর্যায়ে -1 হলে মূল নির্বাচনটি পুনরুদ্ধার করতে যেমন jQuery .blur () ব্যবহার করুন।

— 06 মেইনজেলারিং

Answer 3

কয়েক মাস আগে আমি যখন ডিজাইন তৈরি করছিলাম তখন আমারও একই সমস্যা ছিল। আমি যে সমাধানটি পেয়েছি তা হ'ল .live("change", function())সংমিশ্রণে ব্যবহার করা.blur() যে উপাদানটি ।

আপনি যদি কিছু করতে চান তবে ব্যবহারকারী পরিবর্তনের পরিবর্তে কেবল পরিবর্তিত করুন, ক্লিক করুন ks 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 () সাহায্য করে। আই 7 তে, jQuery এর পরিবর্তন ইভেন্টটি কোডে .blur () না হলে দুবার ট্রিগার করা হয়।

— আঁকুন

প্রশ্নটিতে প্রকাশিত সমস্যাটির সাথে এটি কীভাবে সহায়তা করে, অর্থাত্ নির্বাচন পরিবর্তন না হওয়া পর্যন্ত কিছুই ঘটে না ?

— LarsH

@ লার্শ এই প্রশ্নটি বেশ কয়েক বছর হয়ে গেছে, নিশ্চিত নয় - আমি প্রশ্নটি ভুল পড়ে থাকতে পারি এবং বিভ্রান্ত হয়ে পড়েছি।

— কোডি

যে কেউ এখন খুঁজছেন তাদের জন্য .live সম্পূর্ণরূপে 1.9 api.jquery.com/live/#live-events-handler হিসাবে সরানো হয়েছে । একটি শর্টকাট হিসেবে ব্যবহার করবেন .change api.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 ব্যবহার করা। ব্যবহারকারী যে কোনও সময় নির্বাচন থেকে দূরে ক্লিক করলে এটি আগুন জ্বালাবে। এই মুহুর্তে আপনি নির্ধারণ করতে পারবেন কোন বিকল্পটি নির্বাচন করা হয়েছিল। এমনকি সঠিক সময়ে এটি ট্রিগার করার জন্য, বিকল্পের অনক্লিকটি ক্ষেত্রটি অস্পষ্ট করতে পারে (অন্য কিছু সক্রিয় করতে পারে বা jbery এ কেবলমাত্র ব্লুয়ার () তৈরি করতে পারে)।

Comments

অভিশাপ! "আমি কেন" এই মুহুর্তটি ভাবিনি। ধন্যবাদ!

— ইফেরাও

@ ড্যারিল এটি প্রত্যাশার মতো বাস্তবে কাজ করেনি। কখনও কখনও ইভেন্টটি ব্যবহারকারী নির্বাচন শেষ করার আগেই ট্রিগার হয়ে যায়। আমি প্রশ্নের সাথে যুক্ত হওয়া আপডেটটি দেখুন।

— ফেরাউন

বিকল্পের ইভেন্ট ইভেন্ট হ্যান্ডলারগুলি রাখা আইআই এর সমস্ত সংস্করণে ব্যর্থ হবে! webbugtrack.blogspot.com/2007/11/…

— স্কানলিফ

— ক্রোমেও

ফায়ার ফক্সে কাজ করে।

— লেজসাকোডি

Answer 5

অনক্লিক পদ্ধতির সম্পূর্ণরূপে খারাপ নয় তবে যেমন বলা আছে, যখন মাউস-ক্লিকের মাধ্যমে মানটি পরিবর্তন করা হয় না তখন এটি ট্রিগার করা হবে না।
অনিচ্ছুক ইভেন্টে অন্লিক ইভেন্টটি ট্রিগার করা সম্ভব is

<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 জেএস এর মাধ্যমে একটি নির্বাচিত বাক্সে অপসারণ অপশনগুলি যুক্ত করার সময় ট্রিগার করা হয়। যখন কোনও ব্যবহারকারী কোনও আইটেম নির্বাচন করেন তখনই নয়

— জেন্ডারওয়ার

@ নুমনন আমি এটির ত্রুটিগুলি ঠিক করেছি যদি এটি এখনও সহায়ক হয়। আমি মনে করি আমি নিজেই অ্যাপ্লিকেশনটিতে এটি পরীক্ষা করেছিলাম এবং যখন আমি এটি অনুলিপি করেছি তখন আমি একটি ভেরিয়েবলের নাম পরিবর্তন করতে ভুলে গিয়েছিলাম। সম্পাদক এ কাজ করা উচিত এবং এখন আরও জ্ঞান করা উচিত।

— টাইলার স্টাহলুথ

Answer 7

আপনার যদি সত্যিই এটির মতো কাজ করার প্রয়োজন হয় তবে আমি এটি করব (এটি কীবোর্ড এবং মাউস দ্বারা কাজ করে তা নিশ্চিত করার জন্য)

• "বর্তমান" মান সেট করতে নির্বাচন করতে একটি অনফোকাস ইভেন্ট হ্যান্ডলার যুক্ত করুন
• মাউসের পরিবর্তনগুলি পরিচালনা করতে নির্বাচন করতে একটি অন্লিক ইভেন্ট হ্যান্ডলার যুক্ত করুন
• কীবোর্ড পরিবর্তনগুলি হ্যান্ডেল করার জন্য একটি অন্ক্রিপস ইভেন্ট হ্যান্ডলার যুক্ত করুন

দুর্ভাগ্যক্রমে অনক্লিকটি একাধিকবার চলবে (যেমন নির্বাচন অন্বেষণে ... এবং নির্বাচন / বন্ধ করার সময়) এবং কোনও পরিবর্তন না হলে অন্ক্রিপ্স গুলি চালাতে পারে ...

<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পরিবর্তনের ইভেন্টটি জোর করার জন্য মনোনিবেশের জন্য একটি নেতিবাচক নির্দিষ্ট করুন। এটি আপনাকে নির্বাচিত বাক্সটি কৌতুক করতে দেয়, ততক্ষণ এটি ফোকাস করার পরে এটি কাজ করে না। সহজ ফিক্সটি হ'ল নির্বাচিত বাক্সটি অস্পষ্ট করতে বাধ্য করা, যা নীচে দেখানো হয়েছে।

স্ট্যান্ডার্ড জেএস / এইচটিএমএল:

<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

এটি ক্রোমের সাথে কাজ করে, তবে আই 9 এর সাথে নয়: যখন আমি নিয়ন্ত্রণটিতে ক্লিক করি তখন এর পাঠ্যটি অদৃশ্য হয়ে যায় এবং এটি ড্রপ-ডাউন হয় না।

— ChrisW

এটির সাথে সমস্যাটি হ'ল এটি বর্তমান নির্বাচনকে নাক করে দেয়। যদি বর্তমান নির্বাচন বি হয় এবং আমি পুলডাউন-তে ক্লিক করি, তবে চেকমার্কটি A এর পাশে প্রদর্শিত হবে! তবে এ সত্যই নির্বাচিত নয়, কারণ আমি মেনুটি স্লাইড করে মাউস বোতামটি ছেড়ে দিলে (মেনুটি বাতিল করে দেওয়া) নির্বাচনটি ফাঁকা হয়ে যায়। আপনি যদি পুলডাউনটিতে ট্যাব করেন তবে নির্বাচনটিও ফাঁকা হয়ে যায়, আপনি যদি ফর্মের অন্য কোনও অংশে ট্যাবিং করে যাচ্ছিলেন তবে আপনি সহজেই করতে পারেন, পথে কোনও ক্ষতি করার আশা করছেন না। (আপনার জেসফিডেলে ট্যাব টিপুন এবং আপনি আমার অর্থ কী তা দেখতে পাবেন))

— স্কট

Answer 9

প্রকৃতপক্ষে, ব্যবহারকারী যখন কন্ট্রোলটি নির্বাচন নিয়ন্ত্রণে পরিবর্তন করতে কীবোর্ড ব্যবহার করে তখন অনক্লিক ইভেন্টগুলি আগুন দেবে না। আপনি যে আচরণটি সন্ধান করছেন এটি পেতে আপনাকে onChange এবং onClick এর সংমিশ্রণ ব্যবহার করতে হতে পারে।

Comments

হ্যাঁ, আমাকে করতে হবে .. তবে আমি যে সমস্যার মুখোমুখি হচ্ছি তা হ'ল আপনি যে উদ্বেগ উত্থাপন করছেন তার একটি পৃথক গণিত og <option> এ থাকা অনক্লিক ইভেন্টটি ব্যবহারকারী তার নির্বাচন শেষ করার আগেই বরখাস্ত হয়ে যাচ্ছে, যা এটি ব্যবহার করা অসম্ভব বলে মনে হচ্ছে।

— ফেরাউন

আপনি যখন নতুন আইটেমটিতে বাছাইয়ের পরে এন্টার টিপুন তখন ক্রোমে ইভেন্টগুলি আগুন দেয়

— জিন গোলোচিনস্কি

Answer 10

এটি আপনার প্রশ্নের সরাসরি উত্তর নাও দিতে পারে, তবে এই সমস্যাটি সাধারণ নকশা স্তরের সামঞ্জস্যের দ্বারা সমাধান করা যেতে পারে। আমি বুঝতে পারি এটি ব্যবহারের ক্ষেত্রে 100% প্রযোজ্য নাও হতে পারে, তবে আমি দৃ strongly়ভাবে আপনাকে আপনার অ্যাপ্লিকেশনটির ব্যবহারকারীর প্রবাহকে পুনরায় চিন্তাভাবনা করার বিষয়ে বিবেচনা করার জন্য অনুরোধ করছি এবং যদি নিম্নলিখিত নকশার পরামর্শটি কার্যকর করা যায়।

আমি বিকল্প ফাটান চেয়ে কিছু সহজ না করার সিদ্ধান্ত নিয়েছে 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() আগুনের ।

এই উত্তরের সময়, আমি একটি জটিল ভ্যু অ্যাপ্লিকেশন লিখছি এবং আমি দেখতে পেলাম যে এই নকশা পছন্দটি আমার কোডটিকে অনেক সহজ করেছে। এই সমাধানটি স্থির করার আগে আমি এই সমস্যার জন্য কয়েক ঘন্টা ব্যয় করেছি এবং আমার কোডটি প্রচুর পুনরায় লিখতে হয়নি। তবে, আমি যদি হ্যাকি বিকল্পের সাথে চলে যাই, এজাক্স অনুরোধগুলি ডাবল ফায়ারিং রোধ করার জন্য প্রান্তের ক্ষেত্রে আমাকে জবাবদিহিতা করতে হবে ব্রাউজারগুলিও)।

কখনও কখনও, আপনার সহজ সমাধানের জন্য কেবল একটি পদক্ষেপ ফিরে নেওয়া এবং বড় ছবিটি নিয়ে ভাবতে হবে।

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"সমাধানগুলির মতো একই ত্রুটি : বর্তমান উপাদানটি আপনি যদি উপাদানটি ট্যাব করেন, বা কোনও কিছু বাছাই না করে মেনুটি বন্ধ করে রাখেন তবে বর্তমান নির্বাচনটি কমে যাবে। আমি কী বলতে চাইছি তা দেখতে আপনার ফ্রিডে ট্যাব টিপুন। (এছাড়াও খেয়াল করুন যে আপনি একটি শূন্য মূল্য পেয়েছেন এবং '-' না যখন আপনি এটি করেন That's কারণ এটি আপনাকে এনে selectedIndex=-1দেয় না <option value="-1">; এটি এখানে ব্যবহার করার ক্ষেত্রে কিছুটা উন্নতি হবে onfocus="this.selectedIndex=0"This এটি অর্ধ-শালীন কাজ, তবে আমি করি না বর্তমান নির্বাচনটি হারাতে কেবল যেমন আমি মেনুতে

— উঁকি দিয়েছি

Answer 13

প্রথমে আপনি ইভেন্ট হ্যান্ডলার হিসাবে onChange ব্যবহার করুন এবং তারপরে প্রতিটি বার আপনি পরিবর্তন করতে চাইলে ফাংশনটি করতে এটি তৈরি করতে পতাকা পরিবর্তনশীল ব্যবহার করুন

<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অনেক লোক আগে উল্লিখিত হিসাবে খুব অস্থিতিশীল। সুতরাং আমাদের যা করতে হবে তা হল একটি প্রাথমিক বাটন লেবেল তৈরি করা যা আপনার আসল বিকল্পগুলির চেয়ে পৃথক, যাতে যে কোনও বিকল্পে অন্বেষণ কাজ করবে।

<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

এখানে আমার সমাধানটি এখানে অন্য যে কোনওর থেকে সম্পূর্ণ আলাদা। ড্রপডাউন খোলার জন্য নির্বাচিত বাক্সটিতে ক্লিক করার বিপরীতে কোনও বিকল্প ক্লিক করা হয়েছিল কিনা তা সনাক্ত করতে এটি মাউস অবস্থানটি ব্যবহার করে। এটি ইভেন্ট.স্ক্রিনওয়্যার অবস্থানটি ব্যবহার করে কারণ এটি একমাত্র নির্ভরযোগ্য ক্রস ব্রাউজার পরিবর্তনশীল। একটি হোভার ইভেন্টটি প্রথমে সংযুক্ত করতে হবে যাতে এটি ক্লিক ইভেন্টের আগে পর্দার তুলনায় নিয়ন্ত্রণের অবস্থানটি সনাক্ত করতে পারে।

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");
});

এখানে আমার জেএসফিডেল http://jsfiddle.net/sU7EV/4/

Comments

ওএস এক্স এর জন্য সাফারি বা ক্রোমে কাজ করে না The সতর্কতাটি কখনই ট্রিগার হয় না।

— স্কট

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>

এই পদ্ধতিতে, বিকল্পটি পরিবর্তিত হলে অনচেঞ্জ কল করে 'ডোসোমিংথিং ()' এবং যখন অনিচ্ছুক ইভেন্টটি মিথ্যা হয়, অনক্লিক কল করে 'ডোসোমিংথিং ()' কল করে, অন্য কথায়, যখন আপনি একই বিকল্পটি নির্বাচন করেন

Comments

ওএস এক্স এর জন্য সাফারি বা ক্রোমে আমার পক্ষে কাজ করে না j 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>

এখানে আপনার সূচি ফিরে এসেছে, এবং জেএস কোডে আপনি এই রিটার্নটি একটি সুইচ বা আপনার পছন্দসই কিছুতে ব্যবহার করতে পারেন।

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

একটি সত্য উত্তরটি হল নির্বাচন ক্ষেত্রটি ব্যবহার না করা (যদি আপনি একই উত্তরটি পুনরায় নির্বাচন করার সময় কিছু করার প্রয়োজন হয়))

প্রচলিত ডিভি, বোতাম, শো / লুকান মেনু সহ একটি ড্রপডাউন মেনু তৈরি করুন। লিঙ্ক: https://www.w3schools.com/howto/howto_js_DPdown.asp

কেউ যদি ইভেন্ট শ্রোতাদের বিকল্পগুলিতে যুক্ত করতে সক্ষম হয় তবে এড়ানো যেত। যদি নির্বাচিত উপাদানগুলির জন্য একটি অন-নির্বাচন শ্রোতা থাকত। এবং যদি নির্বাচিত ক্ষেত্রটিতে ক্লিক করা বাড়াবাড়িভাবে মোসডাউন, মাউসআপ বন্ধ করে না দেয় এবং একই মুহুর্তে মাউসডাউনটিতে ক্লিক করে।

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
});

উপরের কোডটি একই মান নির্বাচন করা হলেও আপনাকে অন্বেষণ ট্রিগার করতে দেয়। তবে ব্যবহারকারী যদি নির্বাচিত বাক্সের বাইরে ক্লিক করেন তবে আপনি পূর্বের মানটি পুনরুদ্ধার করতে চান। আমরা এটি ব্লুারে করি:

$("#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

আমি এই সমাধানটি খুঁজে পেয়েছি।

প্রাথমিকভাবে নির্বাচিত উপাদানগুলির নির্বাচিত তালিকাটিকে 0 তে সেট করুন

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

চেঞ্জ ইভেন্টটিতে এই পদ্ধতিটি কল করুন