<select> HTML'si için bir onSelect etkinliği veya eşdeğeri var mı?

Birden çok seçenek arasından seçim yapmamı ve kullanıcı seçimi değiştirdiğinde bir şeyler yapmamı sağlayan bir giriş formum var . Örneğin,

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

Şimdi, doSomething()sadece seçim değiştiğinde tetikleniyor .

doSomething()Kullanıcı herhangi bir seçeneği, muhtemelen aynı seçeneği seçtiğinde tetiklemek istiyorum .

Bir "onClick" işleyicisi kullanmayı denedim, ancak kullanıcı seçim işlemini başlatmadan önce tetiklenir.

Yani, kullanıcı tarafından yapılan her seçimde bir işlevi tetiklemenin bir yolu var mı?

Güncelleme:

Darryl tarafından önerilen cevap işe yaramış gibi göründü, ancak tutarlı bir şekilde çalışmıyor. Bazen kullanıcı, seçim menüsünü bitirmeden önce, açılır menüyü tıklar tıklamaz olay tetiklenir!

İşte en basit yol:

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

Seçime odaklanıldığında hem fare seçimi hem de klavye Yukarı / Aşağı tuşları ile çalışır.

Aynı şeylere ihtiyacım vardı. Benim için işe yarayan buydu:

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

Bunu destekler:

kullanıcı herhangi bir seçeneği belirlediğinde , muhtemelen aynı seçenek tekrar

Birkaç ay önce bir tasarım oluştururken de aynı sorunu yaşadım. Bulduğum çözüm kullanmaktı .live("change", function())birlikte .blur()elemana kullandığınız.

Kullanıcı sadece yerine değişen, tıkladığında o şey yapmak zorunda isterseniz, sadece değiştirmek changeile click.

Açılır menüme bir kimlik atadım selectedve aşağıdakileri kullandım:

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

Bunun seçilmiş bir cevabı olmadığını gördüm, bu yüzden girdimi vereceğimi düşündüm. Bu benim için mükemmel çalıştı, umarım birileri takıldıklarında bu kodu kullanabilirler.

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

Düzenleme: onSeçiciyi aksine kullanın .live. Bkz. JQuery .on ()

Sadece bir fikir, ama her bir <option>öğeye bir tıklama yapmak mümkün mü?

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

Başka bir seçenek de seçimde onblur kullanmak olabilir. Bu, kullanıcı seçimden uzağa her tıkladığında tetiklenir. Bu noktada hangi seçeneğin seçildiğini belirleyebilirsiniz. Bunun doğru zamanda bile tetiklenmesi için, seçeneğin tek tıklanması alanı bulanıklaştırabilir (jQuery'de başka bir şeyi aktif veya sadece .blur () yapabilir).

Onclick yaklaşımı tamamen kötü değildir, ancak belirtildiği gibi, değer bir fare tıklamasıyla değiştirilmediğinde tetiklenmez.
Ancak onchange olayında onclick olayını tetiklemek mümkündür.

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

Jitbit'in cevabını genişletecek. Açılır kutuyu tıkladıktan sonra hiçbir şey seçmeden aşağı açılır kutuyu tıklattığınızda garip buldum. Aşağıdakiler boyunca bir şeyle sonuçlandı:

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>

Bu, kullanıcı için biraz daha mantıklıdır ve önceki bir seçenek de dahil olmak üzere herhangi bir seçeneği seçtiğinde JavaScript'in çalışmasına izin verir.

Bu yaklaşımın dezavantajı, bir açılır menüye geçme ve değeri seçmek için ok tuşlarını kullanma yeteneğini kırmasıdır. Tüm kullanıcılar sonsuzluğun sonuna kadar her şeyi tıkladığından bu benim için kabul edilebilirdi.

Bu şekilde çalışmak için buna gerçekten ihtiyacınız varsa, bunu yapardım (klavye ve fare ile çalışmasını sağlamak için)

• "Geçerli" değeri ayarlamak için seçime bir onkocus olay işleyicisi ekleyin
• Fare değişikliklerini işlemek için seçime bir onclick olay işleyicisi ekleme
• Klavye değişikliklerini işlemek için bir tuşa olay işleyici ekleme

Ne yazık ki onclick birden fazla kez çalışacaktır (örneğin, seçimi açarken ... ve seçimi / kapatırken) ve hiçbir şey değişmediğinde onkeypress patlayabilir ...

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

Kullanıcı bir şeyi her seçtiğinde (aynı seçenek olsa bile) bir etkinliği düzgün bir şekilde tetiklemek için seçim kutusunu işaretlemeniz yeterlidir.

Diğerlerinin söylediği gibi, selectedIndexdeğişiklik olayını zorlamak için odaklanmaya bir negatif belirtin . Bu, seçim kutusunu kandırmanıza izin verse de, yine de odaklandığı sürece bundan sonra çalışmaz. Basit düzeltme, aşağıda gösterilen seçim kutusunu bulanıklaştırmaya zorlamaktır.

Standart JS / HTML:

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

jQuery Eklentisi:

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

Bir görebilirsiniz burada çalışan demo .

Aslında, kullanıcı seçim kontrolündeki seçimi değiştirmek için klavyeyi kullandığında onclick olayları ÇALIŞMAZ. Aradığınız davranışı elde etmek için onChange ve onClick kombinasyonlarını kullanmanız gerekebilir.

Bu, sorunuza doğrudan cevap vermeyebilir, ancak bu sorun, basit tasarım düzeyi ayarlamalarıyla çözülebilir. Bunun tüm kullanım durumları için% 100 geçerli olmayabileceğini biliyorum, ancak uygulamanızdaki kullanıcı akışınızı ve aşağıdaki tasarım önerisinin uygulanıp uygulanamayacağını yeniden düşünmenizi şiddetle tavsiye ediyorum.

Ben için alternatifler hack daha şey basit yapmaya karar onChange()gerçekten bu amaç için değildi diğer olayları kullanarak ( blur, clickvs.)

Çözdüğüm yol:

Hiçbir değeri olmayan seçme gibi bir yer tutucu seçenek etiketini önceden eklemeniz yeterlidir.

Yani, sadece hack-y alternatifleri gerektiren aşağıdaki yapıyı kullanmak yerine:

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

Bunu kullanmayı düşünün:

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

Bu şekilde, kodunuz çok daha basitleştirilmiş ve onChangekullanıcı varsayılan değerden başka bir şey seçmeye her karar verdiğinde beklendiği gibi çalışacaktır. Hatta disabledtekrar seçmelerini istemiyorsanız ve seçeneklerden bir şeyler seçmelerini istemiyorsanız, böylece bir onChange()yangını tetiklemek için özelliği ilk seçeneğe ekleyebilirsiniz .

Bu cevap sırasında, karmaşık bir Vue uygulaması yazıyorum ve bu tasarım seçiminin kodumu çok basitleştirdiğini buldum. Ben bu çözümü ile yerleşmeden önce bu sorun üzerinde saat geçirdim ve kodumun çoğunu yeniden yazmak zorunda değildi. Ancak, hacky alternatifleriyle gitseydim, ajax isteklerinin vb. tarayıcılar da).

Bazen, bir adım geri çekmeniz ve en basit çözüm için büyük resmi düşünmeniz gerekir.

Benzer bir Sorunla karşılaştığımda yaptığım şey, yeni bir genel seçenek ('bir seçenek seçin' veya benzer bir şey seçin) ekleyen seçim kutusuna bir 'onFocus' ekledim ve seçilen seçenek olarak varsayılan.

Dolayısıyla amacım, temelde onchange () işlevinin üzerine yazan ve yararlı bir onclick () yöntemine dönüştüren aynı değeri birden çok kez seçebilmektir.

Yukarıdaki önerilere dayanarak, benim için çalışan bunu buldum.

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

her şeyden önce u bir olay işleyici olarak onChange kullanın ve sonra her değişiklik yapmak istediğinizde u istediğiniz işlevi yapmak için flag değişkeni kullanın

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

İlk olarak, bir sütunun başlığı gibi, tıklatmadan önce açılır düğmenin varsayılan değeri olacak ve sonunda sıfırlanacak ek bir seçenek ekleyin doSomething(), bu nedenle A / B / C'yi seçtiğinizde, onchange olayı her zaman tetiklenir, seçim olduğunda Statehiçbir şey yapmayın ve geri dönün. onclickdaha önce bahsettiğimiz kadar çok dengesizdir. Tek yapmamız gereken, gerçek seçeneklerinizden farklı bir başlangıç ​​düğmesi etiketi yapmaktır, böylece değişim herhangi bir seçenek üzerinde çalışacaktır.

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

Seçme etiketi ile ilgili harika şey (bu senaryoda), seçenek etiketlerinden değerini almasıdır.

Deneyin:

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

Benim için iyi çalıştı.

jquery kullanın:

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

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

İşte benim çözümüm, buradakinden tamamen farklı. Açılır kutuyu açmak için seçim kutusuna tıklamak yerine bir seçeneğin tıklanıp tıklanmadığını anlamak için fare konumunu kullanır. Bu tek güvenilir tarayıcı değişkeni olduğu için event.screenY konumunu kullanır. Önce bir fareyle üzerine gelme olayının eklenmesi gerekir, böylece tıklama olayından önceki kontrollerin ekrana göre konumunu anlayabilir.

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

İşte benim jsFiddle http://jsfiddle.net/sU7EV/4/

kullanmayı denemelisin option:selected

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

Benim için ne işe yarar:

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

Bu şekilde, onchange seçenek değiştiğinde 'doSomething ()' öğesini çağırır ve onchange olayı yanlış olduğunda, yani aynı seçeneği seçtiğinizde, on doick 'doSomething ()' öğesini çağırır.

Bunu deneyin (seçeneği belirlediğinizde, seçeneği değiştirmeden tam olarak tetiklenen olay):

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

Burada dizini döndürdünüz ve js kodunda bu dönüşü bir anahtarla veya istediğiniz herhangi bir şeyle kullanabilirsiniz.

Bunu dene:

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

Uzun zaman önce ama asıl soruya cevap olarak, bu yardımcı olur mu? Sadece koymak onClickiçine SELECThattı. Sonra her birinin ne OPTIONyapmasını istediğinizi OPTIONsatırlara koyun . yani:

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

Benzer bir ihtiyaçla karşı karşıya kaldım ve aynı şey için bir açısaljs yönergesi yazdım -

guthub link - açısal seçim

element[0].blur();Odağı seçim etiketinden kaldırmak için kullanılır . Mantık, açılır listenin ikinci tıklamasında bu bulanıklığı tetiklemektir.

as-select kullanıcı açılır menüde aynı değeri seçse bile tetiklenir.

DEMO - bağlantı

Tek doğru cevap seçme alanını kullanmamaktır (aynı cevabı tekrar seçtiğinizde bir şeyler yapmanız gerekiyorsa).

Geleneksel div, düğme, göster / gizle menüsüyle bir açılır menü oluşturun. Bağlantı: https://www.w3schools.com/howto/howto_js_dropdown.asp

Bir olay seçenek dinleyicileri eklemek mümkün olsaydı kaçınılmış olabilirdi. Select öğesi için bir onSelect dinleyicisi varsa. Ve eğer seçim alanına tıklamak fareyle vurma, fareyle vurma ve fareyle aynı anda hepsini tıklama.

Aynı seçeneği tekrar seçmiş olsa bile, eski değerleri hatırladığından ve bir değişim olayını tetiklediğinden emin olmak için burada yapmak istediğiniz birkaç şey vardır.

İstediğiniz ilk şey düzenli bir onChange olayıdır:

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

Aynı seçenek tekrar seçilse bile onChange olayının tetiklenmesi için, açılır liste odağı aldığında geçersiz bir değere ayarlayarak seçilen seçeneğin ayarını kaldırabilirsiniz. Ancak, kullanıcının yeni bir seçenek seçmemesi durumunda, önceden seçilen değeri geri yüklemek için de saklamak istersiniz:

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

Yukarıdaki kod, aynı değer seçilse bile değiştirmeyi tetiklemenizi sağlar. Ancak, kullanıcı seçim kutusunun dışına tıklarsa, önceki değeri geri yüklemek istersiniz. OnBlur üzerinde yapıyoruz:

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

Olay İşleyicileri hızlı bir düşünce ile, IE OPTION etiketi için desteklenmediğini unutmayın .. Bu çözümü ile geldi, deneyin ve bana geri bildiriminizi verin:

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

Burada yaptığım aslında onchange olayının her zaman tetikleneceği şekilde seçim dizinini sıfırlamaktır, doğru, tıkladığınızda seçili öğeyi kaybettiğimiz ve listeniz uzunsa sinir bozucu olabilir, ancak bir şekilde size yardımcı olabilir ..

öğe odak kazandığında seçimin değerini değiştirmeye ne dersiniz, örneğin (jquery ile):

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

Bu çözümü buldum.

select öğesinin selectIndex değerini başlangıçta 0 olarak ayarlayın

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

onChange olayında bu yöntemi çağır