Czy istnieje zdarzenie onSelect lub równoważne dla HTML <select>?

Mam formularz wejściowy, który pozwala mi wybierać spośród wielu opcji i robić coś, gdy użytkownik zmienia wybór. Na przykład,

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

Teraz doSomething()jest uruchamiany tylko po zmianie wyboru .

Chcę uruchomić, doSomething()gdy użytkownik wybierze dowolną opcję, prawdopodobnie tę samą ponownie.

Próbowałem użyć modułu obsługi „onClick”, ale jest on uruchamiany, zanim użytkownik rozpocznie proces selekcji.

Czy istnieje sposób, aby uruchomić funkcję przy każdym wybraniu przez użytkownika?

Aktualizacja:

Odpowiedź sugerowana przez Darryla wydawała się działać, ale nie działa konsekwentnie. Czasami zdarzenie jest wyzwalane, gdy tylko użytkownik kliknie menu rozwijane, nawet zanim użytkownik zakończy proces selekcji!

Oto najprostszy sposób:

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

Działa zarówno z zaznaczaniem myszą, jak i klawiszami w górę / w dół na klawiaturze, na której zaznaczono.

Potrzebowałem czegoś dokładnie takiego samego. Oto, co zadziałało dla mnie:

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

Obsługuje to:

gdy użytkownik wybierze dowolną opcję, prawdopodobnie tę samą ponownie

Miałem ten sam problem, kiedy tworzyłem projekt kilka miesięcy temu. Rozwiązaniem, które znalazłem, było użycie .live("change", function())w połączeniu z.blur() elementem, którego używasz.

Jeśli chcesz mieć coś zrobić, gdy użytkownik po prostu kliknie, zamiast zmieniać, po prostu zastąpić changezclick .

Przypisałem moje menu rozwijane selectedi użyłem następującego:

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

Widziałem, że ta nie ma wybranej odpowiedzi, więc pomyślałem, że dam swój wkład. Działa to dla mnie doskonale, więc mam nadzieję, że ktoś inny może użyć tego kodu, gdy utknie.

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

Edycja: użyj onselektora zamiast .live. Zobacz jQuery .on ()

To tylko pomysł, ale czy można umieścić kliknięcie na każdym z <option>elementów?

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

Inną opcją może być użycie onblur na zaznaczeniu. Uruchomi się za każdym razem, gdy użytkownik kliknie poza wybraną opcją. W tym momencie możesz określić, która opcja została wybrana. Aby to nawet wyzwolić we właściwym czasie, kliknięcie opcji może rozmyć pole (uczynić coś jeszcze aktywnym lub po prostu .blur () w jQuery).

Podejście onclick nie jest całkiem złe, ale jak powiedziano, nie zostanie uruchomione, gdy wartość nie zostanie zmieniona kliknięciem myszy.
Możliwe jest jednak wyzwolenie zdarzenia onclick w zdarzeniu 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>

Zamierzam rozwinąć odpowiedź Jitbita. Uznałem, że to dziwne, kiedy kliknąłeś menu rozwijane, a następnie kliknęli menu rozwijane bez wybierania niczego. Skończyło się na czymś w rodzaju:

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>

Ma to nieco większy sens dla użytkownika i pozwala na uruchomienie JavaScript za każdym razem, gdy wybierze dowolną opcję, w tym wcześniejszą.

Wadą tego podejścia jest to, że łamie on możliwość tabulacji na liście rozwijanej i używania klawiszy strzałek, aby wybrać wartość. Było to dla mnie do zaakceptowania, ponieważ wszyscy użytkownicy klikali wszystko przez cały czas, aż do końca wieczności.

Jeśli naprawdę potrzebujesz, aby działało w ten sposób, zrobiłbym to (aby upewnić się, że działa za pomocą klawiatury i myszy)

• Dodaj moduł obsługi zdarzeń onfocus do zaznaczenia, aby ustawić wartość „bieżącą”
• Dodaj moduł obsługi zdarzeń onclick do zaznaczenia, aby obsłużyć zmiany myszy
• Dodaj moduł obsługi zdarzeń onkeypress do zaznaczenia, aby obsłużyć zmiany klawiatury

Niestety kliknięcie będzie uruchamiane wiele razy (np. Po otwarciu zaznaczenia ... i zaznaczeniu / zamknięciu), a klawisz onkeypress może zostać uruchomiony, gdy nic się nie zmieni ...

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

Aby poprawnie uruchomić zdarzenie za każdym razem, gdy użytkownik wybierze coś (nawet tę samą opcję), wystarczy oszukać pole wyboru.

Jak powiedzieli inni, określ negatyw selectedIndex ustawienie ostrości, aby wymusić zdarzenie zmiany. Chociaż pozwala to na oszukać pole wyboru, nie będzie działać, dopóki będzie ono aktywne. Prostym rozwiązaniem jest wymuszenie rozmycia pola wyboru, jak pokazano poniżej.

Standardowy JS / HTML:

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

jQuery Plugin:

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

Tutaj możesz zobaczyć działające demo .

W rzeczywistości zdarzenia onclick NIE będą uruchamiane, gdy użytkownik użyje klawiatury do zmiany wyboru w kontrolce select. Być może będziesz musiał użyć kombinacji onChange i onClick, aby uzyskać pożądane zachowanie.

To może nie odpowiedzieć bezpośrednio na twoje pytanie, ale ten problem można rozwiązać przez proste dostosowanie poziomu projektu. Rozumiem, że może to nie dotyczyć w 100% wszystkich przypadków użycia, ale zdecydowanie zachęcam do ponownego przemyślenia przepływu aplikacji przez użytkownika i czy można zastosować następującą sugestię projektową.

Zdecydowałem się zrobić coś prostszego niż hackowanie alternatyw dla onChange()wykorzystania innych zdarzeń, które tak naprawdę nie były przeznaczone do tego celu ( blur,click etc.)

Sposób, w jaki to rozwiązałem:

Po prostu wstępnie wstaw symbol zastępczy, taki jak select, który nie ma dla niego żadnej wartości.

Zamiast korzystać z następującej struktury, która wymaga alternatywnych metod hack-y:

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

Rozważ użycie tego:

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

W ten sposób Twój kod jest DUŻO uproszczony i onChangebędzie działał zgodnie z oczekiwaniami, za każdym razem, gdy użytkownik zdecyduje się wybrać coś innego niż wartość domyślna. Możesz nawet dodać disabledatrybut do pierwszej opcji, jeśli nie chcesz, aby wybrał go ponownie i zmusić do wybrania czegoś z opcji, wywołując w ten sposób onChange()pożar.

W chwili udzielania odpowiedzi piszę złożoną aplikację Vue i stwierdziłem, że ten wybór projektu znacznie uprościł mój kod. Spędziłem godziny na tym problemie, zanim zdecydowałem się na to rozwiązanie i nie musiałem ponownie pisać dużo mojego kodu. Jednakże, gdybym wybrał hacky alternatywy, musiałbym wziąć pod uwagę przypadki krawędzi, aby zapobiec podwójnemu uruchamianiu żądań ajax itp. To również nie psuje domyślnego zachowania przeglądarki jako miłej premii (testowane na urządzeniach mobilnych przeglądarki również).

Czasami wystarczy zrobić krok do tyłu i pomyśleć o dużym obrazie dla najprostszego rozwiązania.

To, co zrobiłem, gdy napotkałem podobny problem, to dodanie „onFocus” do pola wyboru, które dołącza nową ogólną opcję („wybierz opcję” lub coś podobnego) i domyślnie jako wybraną opcję.

Moim celem było więc wielokrotne wybranie tej samej wartości, która zasadniczo nadpisuje funkcję onchange () i przekształca ją w przydatną metodę onclick ().

Na podstawie powyższych sugestii wpadłem na to, co działa dla mnie.

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

przede wszystkim używasz onChange jako procedury obsługi zdarzeń, a następnie używasz zmiennej flagowej, aby wykonać tę funkcję, którą chcesz za każdym razem, gdy wprowadzasz zmiany

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

Dodaj dodatkową opcję jako pierwszą, na przykład nagłówek kolumny, która będzie domyślną wartością przycisku rozwijanego przed kliknięciem i zresetowaniem na końcu doSomething(), więc gdy wybierzesz A / B / C, zdarzenie onchange zawsze uruchamia się, gdy wybór jest State, nic nie rób i wróć. onclickjest bardzo niestabilny, jak wiele osób wspomniało wcześniej. Więc wszystko, co musimy zrobić, to zrobić początkową etykietę przycisku, która będzie inna niż twoje prawdziwe opcje, więc zmiana będzie działać na każdej opcji.

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

Cudowną rzeczą w tagu select (w tym scenariuszu) jest to, że pobiera swoją wartość z tagów opcji.

Próbować:

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

Działał dla mnie przyzwoicie.

użyj jquery:

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

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

Oto moje rozwiązanie, zupełnie inne niż wszystkie inne tutaj. Używa pozycji myszy, aby dowiedzieć się, czy kliknięto opcję, a nie kliknięcie pola wyboru, aby otworzyć menu rozwijane. Wykorzystuje pozycję event.screenY, ponieważ jest to jedyna niezawodna zmienna dla różnych przeglądarek. Zdarzenie zawisu musi być najpierw dołączone, aby mogło ustalić pozycję elementów sterujących względem ekranu przed zdarzeniem kliknięcia.

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

Oto mój jsFiddle http://jsfiddle.net/sU7EV/4/

powinieneś spróbować użyć option:selected

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

Co dla mnie działa:

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

W ten sposób onchange wywołuje „doSomething ()”, gdy opcja się zmienia, a onclick wywołuje „doSomething ()”, gdy zdarzenie onchange jest fałszywe, innymi słowy, gdy wybierzesz tę samą opcję

Spróbuj tego (zdarzenie wyzwalane dokładnie po wybraniu opcji, bez zmiany opcji):

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

Tutaj masz zwrócony indeks, aw kodzie js możesz użyć tego zwrotu z jednym przełącznikiem lub czymkolwiek chcesz.

Spróbuj tego:

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

Czy dawno temu, ale w odpowiedzi na pierwotne pytanie, czy to pomogłoby? Po prostu włóż onClickdo SELECTlinii. Następnie umieść OPTIONw OPTIONwierszach to, co chcesz zrobić . to znaczy:

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

Stawiłem czoła podobnej potrzebie i ostatecznie napisałem dyrektywę angularjs dotyczącą tego samego -

link guthub - wybór kątowy

Służy element[0].blur();do usuwania fokusa ze znacznika wyboru. Logika polega na wywołaniu tego rozmycia przy drugim kliknięciu menu rozwijanego.

as-select uruchamia się, nawet gdy użytkownik wybierze tę samą wartość z menu rozwijanego.

DEMO - link

Jedyną prawdziwą odpowiedzią jest nieużywanie pola wyboru (jeśli musisz coś zrobić po ponownym wybraniu tej samej odpowiedzi).

Utwórz menu rozwijane z konwencjonalnym menu div, przycisk, pokaż / ukryj. Link: https://www.w3schools.com/howto/howto_js_dropdown.asp

Można by tego uniknąć, gdyby można było dodać detektory zdarzeń do opcji. Jeśli dla elementu select istniał detektor onSelect. A jeśli kliknięcie wybranego pola nie spowodowało irytującego odpalenia mousedown, najedź myszką i kliknij wszystkie jednocześnie na mousedown.

Jest kilka rzeczy, które chcesz zrobić tutaj, aby upewnić się, że zapamiętuje starsze wartości i wyzwala zdarzenie onchange, nawet jeśli ta sama opcja zostanie ponownie wybrana.

Pierwszą rzeczą, jakiej chcesz, jest regularne zdarzenie onChange:

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

Aby mieć wyzwalacz zdarzenia onChange, nawet gdy ta sama opcja zostanie ponownie wybrana, możesz odznaczyć wybraną opcję, gdy menu rozwijane zostanie aktywowane, ustawiając ją na niepoprawną wartość. Ale chcesz również zapisać poprzednio wybraną wartość, aby ją przywrócić w przypadku, gdy użytkownik nie wybierze żadnej nowej opcji:

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

Powyższy kod pozwoli ci uruchomić onchange, nawet jeśli wybrano tę samą wartość. Jeśli jednak użytkownik kliknie poza polem wyboru, chcesz przywrócić poprzednią wartość. Robimy to na 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);
    }
});

Uprzejmie informujemy, że moduły obsługi zdarzeń nie są obsługiwane dla znacznika OPTION w przeglądarce IE. Szybko się nad tym zastanowiłem. Wymyśliłem to rozwiązanie, wypróbuj je i przekaż mi swoją opinię:

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

To, co tu robię, to zresetowanie indeksu wyboru, tak aby zdarzenie onchange było zawsze uruchamiane, prawda, że ​​tracimy wybrany element po kliknięciu i może to być denerwujące, jeśli twoja lista jest długa, ale może ci to w jakiś sposób pomóc ..

co ze zmianą wartości zaznaczenia, gdy element zyskuje fokus, np. (z 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('');
    }
});

Znalazłem to rozwiązanie.

początkowo ustaw parametr selectedIndex elementu select na 0

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

nazwij tę metodę zdarzeniem onChange