Apakah ada acara onSelect atau setara dengan HTML <select>?

Saya memiliki formulir input yang memungkinkan saya memilih dari beberapa opsi, dan melakukan sesuatu ketika pengguna mengubah pilihan. Misalnya,

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

Sekarang, doSomething()hanya akan terpicu ketika seleksi berubah .

Saya ingin memicu doSomething()ketika pengguna memilih opsi apa pun, mungkin yang sama lagi.

Saya telah mencoba menggunakan pengendali "onClick", tetapi itu dipicu sebelum pengguna memulai proses pemilihan.

Jadi, apakah ada cara untuk memicu fungsi di setiap pilih oleh pengguna?

Memperbarui:

Jawaban yang disarankan oleh Darryl tampaknya berhasil, tetapi tidak berhasil secara konsisten. Terkadang acara dipicu segera setelah pengguna mengklik menu drop-down, bahkan sebelum pengguna menyelesaikan proses pemilihan!

Inilah cara paling sederhana:

<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>

Berfungsi baik dengan pemilihan mouse dan keyboard tombol Atas / Bawah yang pilih difokuskan.

Saya membutuhkan sesuatu yang persis sama. Inilah yang bekerja untuk saya:

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

Mendukung ini:

ketika pengguna memilih opsi apa pun, mungkin opsi yang sama lagi

Saya memiliki masalah yang sama ketika saya membuat desain beberapa bulan yang lalu. Solusi yang saya temukan adalah menggunakan .live("change", function())kombinasi dengan .blur()elemen yang Anda gunakan.

Jika Anda ingin melakukan sesuatu ketika pengguna cukup mengklik, bukan mengubah, ganti saja changedengan click.

Saya memberikan ID saya dropdown selected,, dan menggunakan yang berikut:

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

Saya melihat ini tidak memiliki jawaban yang dipilih, jadi saya pikir saya akan memberikan masukan saya. Ini bekerja dengan baik untuk saya, jadi semoga orang lain dapat menggunakan kode ini ketika mereka macet.

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

Sunting: Gunakan onpemilih sebagai lawan .live. Lihat jQuery .on ()

Hanya sebuah ide, tetapi apakah mungkin untuk melakukan onclick pada masing-masing <option>elemen?

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

Pilihan lain bisa menggunakan on blur pada pilih. Ini akan memecat kapan saja pengguna mengklik dari pilih. Pada titik ini Anda dapat menentukan opsi apa yang dipilih. Agar pemicu ini merata pada waktu yang tepat, klik opsi dapat mengaburkan bidang (membuat sesuatu yang lain aktif atau hanya .blur () di jQuery).

Pendekatan onclick tidak sepenuhnya buruk tetapi seperti yang dikatakan, itu tidak akan dipicu ketika nilainya tidak diubah oleh klik-mouse.
Namun dimungkinkan untuk memicu acara onclick di acara onchange.

<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>

Akan memperluas jawaban jitbit. Saya merasa aneh ketika Anda mengklik drop down dan kemudian mengklik drop down tanpa memilih apa pun. Berakhir dengan sesuatu di sepanjang baris:

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>

Ini lebih masuk akal bagi pengguna dan memungkinkan JavaScript untuk berjalan setiap kali mereka memilih opsi apa pun termasuk opsi sebelumnya.

Kelemahan dari pendekatan ini adalah bahwa itu memecah kemampuan untuk tab ke drop-down dan menggunakan tombol panah untuk memilih nilai. Ini dapat diterima bagi saya karena semua pengguna mengklik semuanya sepanjang waktu sampai akhir keabadian.

Jika Anda benar-benar membutuhkan ini untuk bekerja seperti ini, saya akan melakukan ini (untuk memastikan itu berfungsi dengan keyboard dan mouse)

• Tambahkan event handler onfocus ke pilih untuk mengatur nilai "saat ini"
• Tambahkan event handler onclick ke pilih untuk menangani perubahan mouse
• Tambahkan pengendali acara onkeypress ke pilih untuk menangani perubahan keyboard

Sayangnya onclick akan berjalan beberapa kali (mis. Onpening pilih ... dan pada seleksi / tutup) dan onkeypress mungkin menyala ketika tidak ada perubahan ...

<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>

Untuk menjalankan acara dengan benar setiap kali pengguna memilih sesuatu (bahkan opsi yang sama), Anda hanya perlu mengelabui kotak pilih.

Seperti orang lain katakan, tentukan selectedIndexfokus negatif untuk memaksa acara perubahan. Meskipun ini memungkinkan Anda untuk mengelabui kotak pilih, itu tidak akan berfungsi setelah itu selama masih memiliki fokus. Perbaikan sederhana adalah dengan memaksa kotak pilih untuk kabur, yang ditunjukkan di bawah ini.

JS / HTML standar:

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

Plugin 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>

Anda dapat melihat demo yang berfungsi di sini .

Sebenarnya, acara onclick TIDAK akan menyala ketika pengguna menggunakan keyboard untuk mengubah pilihan dalam kontrol pilih. Anda mungkin harus menggunakan kombinasi onChange dan onClick untuk mendapatkan perilaku yang Anda cari.

Ini mungkin tidak langsung menjawab pertanyaan Anda, tetapi masalah ini bisa diselesaikan dengan penyesuaian tingkat desain sederhana. Saya memahami ini mungkin tidak 100% berlaku untuk semua kasus penggunaan, tetapi saya sangat menyarankan Anda untuk mempertimbangkan kembali aliran pengguna aplikasi Anda dan jika saran desain berikut dapat diterapkan.

Saya memutuskan untuk melakukan sesuatu yang sederhana dari hacking alternatif untuk onChange()menggunakan peristiwa lain yang tidak benar-benar dimaksudkan untuk tujuan ini ( blur, click, dll)

Cara saya menyelesaikannya:

Cukup pra-tunda tag opsi placeholder seperti pilih yang tidak memiliki nilai untuk itu.

Jadi, alih-alih hanya menggunakan struktur berikut, yang membutuhkan alternatif hack-y:

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

Pertimbangkan untuk menggunakan ini:

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

Jadi, dengan cara ini, kode Anda BANYAK lebih disederhanakan dan onChangeakan berfungsi seperti yang diharapkan, setiap kali pengguna memutuskan untuk memilih sesuatu selain nilai default. Anda bahkan dapat menambahkan disabledatribut ke opsi pertama jika Anda tidak ingin mereka memilihnya lagi dan memaksa mereka untuk memilih sesuatu dari opsi, sehingga memicu onChange()kebakaran.

Pada saat jawaban ini, saya sedang menulis aplikasi Vue yang kompleks dan saya menemukan bahwa pilihan desain ini telah banyak menyederhanakan kode saya. Saya menghabiskan berjam-jam untuk masalah ini sebelum saya menyelesaikan dengan solusi ini dan saya tidak perlu menulis ulang banyak kode saya. Namun, jika saya menggunakan alternatif peretasan, saya harus memperhitungkan kasus tepi, untuk mencegah penembakan ganda atas permintaan ajax, dll. Ini juga tidak mengacaukan perilaku peramban default sebagai bonus bagus (diuji pada ponsel browser juga).

Terkadang, Anda hanya perlu mengambil langkah mundur dan memikirkan gambaran besar untuk solusi paling sederhana.

Apa yang saya lakukan ketika dihadapkan dengan Masalah serupa adalah saya menambahkan 'onFocus' ke kotak pilih yang menambahkan opsi generik baru ('pilih opsi' atau sesuatu yang serupa) dan default sebagai opsi yang dipilih.

Jadi tujuan saya adalah untuk dapat memilih nilai yang sama beberapa kali yang pada dasarnya menimpa fungsi onchange () dan mengubahnya menjadi metode onclick () yang bermanfaat.

Berdasarkan saran di atas saya datang dengan ini yang bekerja untuk saya.

<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/

pertama-tama Anda menggunakan onChange sebagai pengendali event dan kemudian menggunakan variabel flag untuk membuatnya melakukan fungsi yang Anda inginkan setiap kali Anda membuat perubahan

<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>

Tambahkan opsi tambahan sebagai yang pertama, seperti tajuk kolom, yang akan menjadi nilai default dari tombol dropdown sebelum mengkliknya dan reset pada akhir doSomething(), jadi ketika memilih A / B / C, acara pertukaran selalu memicu, ketika pemilihan Statedilakukan, jangan lakukan apa-apa dan kembali. onclicksangat tidak stabil seperti yang banyak orang sebutkan sebelumnya. Jadi yang perlu kita lakukan adalah membuat label tombol awal yang berbeda dengan pilihan sebenarnya sehingga pertukaran akan berfungsi pada opsi apa pun.

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

Hal yang luar biasa tentang tag pilih (dalam skenario ini) adalah bahwa tag tersebut akan mengambil nilainya dari tag opsi.

Mencoba:

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

Bekerja layak untuk saya.

gunakan jquery:

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

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

Inilah solusi saya, sangat berbeda dari yang lain di sini. Menggunakan posisi mouse untuk mencari tahu apakah opsi diklik sebagai lawan mengklik kotak pilih untuk membuka dropdown. Itu memanfaatkan posisi event.screenY karena ini adalah satu-satunya variabel lintas browser yang dapat diandalkan. Event hover harus dipasang terlebih dahulu sehingga dapat mengetahui posisi kontrol relatif terhadap layar sebelum acara klik.

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

Ini jsFiddle saya http://jsfiddle.net/sU7EV/4/

Anda harus mencoba menggunakan option:selected

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

Apa yang berhasil untuk saya:

<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>

Dengan cara itu, onchange memanggil 'doSomething ()' ketika opsi berubah, dan onclick panggilan 'doSomething ()' ketika acara onchange salah, dengan kata lain, ketika Anda memilih opsi yang sama

Coba ini (peristiwa dipicu saat Anda memilih opsi, tanpa mengubah opsi):

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

http://jsbin.com/dowoloka/4

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

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

Di sini Anda memiliki indeks yang dikembalikan, dan dalam kode js Anda dapat menggunakan pengembalian ini dengan satu saklar atau apa pun yang Anda inginkan.

Coba ini:

<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>

Beberapa waktu yang lalu sekarang tetapi dalam menjawab pertanyaan awal, apakah ini membantu? Masukkan saja onClickke dalam SELECTgaris. Lalu, letakkan apa yang ingin Anda OPTIONlakukan di OPTIONbarisan. yaitu:

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

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

Saya telah menghadapi kebutuhan yang sama dan akhirnya menulis arahan angular untuk hal yang sama -

tautan guthub - pilih sudut

Digunakan element[0].blur();untuk menghapus fokus dari tag pilih. Logika adalah untuk memicu blur ini pada klik kedua dropdown.

as-select akan terpicu bahkan ketika pengguna memilih nilai yang sama di dropdown.

DEMO - tautan

Satu jawaban Sejati adalah untuk tidak menggunakan bidang pilih (jika Anda perlu melakukan sesuatu ketika Anda memilih kembali jawaban yang sama.)

Buat menu dropdown dengan div konvensional, tombol, tampilkan / sembunyikan menu. Tautan: https://www.w3schools.com/howto/howto_js_dropdown.asp

Bisa dihindari seandainya ada yang bisa menambahkan pendengar acara ke opsi. Jika ada pendengar onSelect untuk elemen pilih. Dan jika mengklik pada bidang pilih tidak semakin mematikan mousedown, mouseup, dan klik semua pada saat yang sama pada mousedown.

Ada beberapa hal yang ingin Anda lakukan di sini untuk memastikannya mengingat nilai yang lebih lama dan memicu acara pertukaran bahkan jika opsi yang sama dipilih lagi.

Hal pertama yang Anda inginkan adalah acara onChange reguler:

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

Untuk memiliki pemicu onChange event bahkan ketika opsi yang sama dipilih lagi, Anda dapat membatalkan pilihan yang dipilih ketika dropdown menerima fokus dengan mengaturnya ke nilai yang tidak valid. Tetapi Anda juga ingin menyimpan nilai yang dipilih sebelumnya untuk mengembalikannya jika pengguna tidak memilih opsi baru:

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

Kode di atas akan memungkinkan Anda untuk memicu pertukaran bahkan jika nilai yang sama dipilih. Namun, jika pengguna mengklik di luar kotak pilih, Anda ingin mengembalikan nilai sebelumnya. Kami melakukannya di 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);
    }
});

Harap perhatikan bahwa Penangan Kejadian tidak didukung untuk tag OPSI di IE, dengan pemikiran cepat..Saya datang dengan solusi ini, cobalah dan berikan saya tanggapan Anda:

<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>

Apa yang saya lakukan di sini sebenarnya adalah mengatur ulang indeks pilih sehingga acara pertukaran akan selalu terpicu, benar bahwa Anda kami kehilangan item yang dipilih ketika Anda mengklik dan mungkin mengganggu jika daftar Anda panjang, tetapi mungkin membantu Anda di suatu tempat ..

bagaimana dengan mengubah nilai pilih ketika elemen mendapatkan fokus, misalnya (dengan 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('');
    }
});

Saya menemukan solusi ini.

aturIndex yang dipilih dari elemen pilih ke 0 awalnya

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

sebut metode ini di acara Ubah