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


214

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!


1
Rozumiem, dlaczego tak uważasz. Będę mówił krótko. W moim formularzu są dwa dane wejściowe. Miasto (pole tekstowe) i państwo (Wybór). Początkowo wyświetlane jest miasto i jego stan. Gdy użytkownik wybierze stan, filtr wyszukiwania gdzieś rozszerza jego zakres do „całego stanu” zamiast „określonego miasta”.
ePharaoh

9
strager, nie jest to rzadki element interfejsu użytkownika. w niektórych sytuacjach ma sens. innym przykładem może być napisanie masowej wiadomości e-mail, a następnie masz rozwijaną listę z „polami specjalnymi”, które możesz szybko dodać do wiadomości e-mail, imienia, linku rezygnacji itp.
Brian Armstrong

2
tak na marginesie ... w przypadku zdarzeń wbudowanych, takich jak onclick, onchange itp., nie potrzebujesz prefiksu protokołu „javascript:”. on {event} = "doSomething ();" jest w porządku.
scunliffe

niesprawdzone: co powiesz na onClick, ale zastosowane do tagów opcji? oczywiście przez klasę, w dyskretny sposób
The Disintegrator

6
@Dezintegrator Tylko użycie zdarzeń kliknięcia nie obsługuje przypadku użycia, w którym wybierasz opcję za pomocą klawiatury. (Zdaj sobie sprawę, że jest to starożytne pytanie - dodawanie dla przyszłych gości ...)
peteorpeter

Odpowiedzi:


85

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.


36
Ale to nic nie zrobi „kiedy użytkownik wybierze… ten sam jeszcze raz”, prawda?
LarsH

3
Zauważ, że komentarz @KayZhu jest tylko w połowie poprawny: poprawne jest sprawdzenie, czy „selectedIndex” jest większy lub równy zero (lub większy niż -1). Nie ma funkcji „type ()”, a „selectedIndex” nigdy nie będzie undefined.
Pointy

2
@ TJCrowder Masz rację - nie jestem pewien, o czym myślałem, kiedy napisałem drugą połowę. Usunąłem oryginalny komentarz i aby nie mylić innych, oto oryginalny komentarz (pamiętaj, że pierwsza połowa jest poprawna, a druga część jest błędna): To nie będzie działać zgodnie z oczekiwaniami dla pierwszej opcji, która ma indeks 0: 0 w JS jest fałszem, więc doSomething () nie zostanie wykonane. Zamiast tego użyjif(type(this.selectedIndex) != undefined; doSomething()
KZ

14
Ta odpowiedź ma najwięcej pozytywnych opinii, ale nie rozwiązuje problemu! doSomething()Funkcja nie jest wyzwalany, gdy użytkownik wybierze już wybraną opcję. Zobacz ten wątek , w którym kolor tła zmienia się tylko, jeśli wybierzesz inną opcję niż aktualnie wybrana.
skot

FWIW: Jeśli chcesz wywoływać tylko, doSomething()gdy wybrana jest jedna konkretna opcja, na przykład „opcja 3” w powyższym przykładzie, użyj, if (this.selectedIndex==4)przy czym liczba „4” reprezentuje indeks liczbowy opcji, NIE określoną value! (tzn. „opcja 3” jest czwartą opcją <select name="ab">).
rvrvrv

66

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


4
jsfiddle.net/ecmanaut/335XK działa w osx Chrome 30, Safari 6, Firefox 17.
ecmanaut

2
Działa również w Win8 IE10, Win7 IE9, Win7 IE8, WinXP IE7 i IE6. Jednak Jsfiddle lub IE shenanigans zmuszają cię do użycia fiddle.jshell.net/ecmanaut/335XK/show/light bezpośrednio do samego testu - ich widok edytora nie ładuje jQuery użytego w przykładzie dla czytelności. Wszystkie powyższe właśnie przetestowane z interakcją myszy; aby dostosować tę klawiaturę, ten hack prawdopodobnie wymaga dodatkowej pracy, ponieważ co najmniej stare IE chętnie uruchamiają zmianę, zanim miałeś szansę wybrać „C”.
ecmanaut

3
Naprawdę świetna wskazówka. pomógł mi rozwiązać
problem

7
Jeśli wartość jest już wybrana, tabulowanie jej spowoduje problemy. Po przejściu do pola wartość zniknie, co jest dość nieoczekiwanym zachowaniem użytkownika. Ponadto, gdy tabulujesz, stracisz wybór, nawet jeśli nic takiego nie zrobiłeś. W przeciwnym razie dobre pomysły.
KyleMit,

1
Użyj np. JQuery .blur (), aby przywrócić oryginalny wybór, jeśli w momencie utraty fokusu ma wartość -1.
mheinzerling

12

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


dzięki! Pomaga .blur (). W IE7 zdarzenie zmiany jQuery jest wyzwalane dwukrotnie, jeśli w kodzie nie ma .blur ().
losowanie

7
W jaki sposób pomaga to w problemie wyrażonym w pytaniu, tzn. Że nic się nie dzieje, dopóki wybór nie zostanie zmieniony ?
LarsH

2
@LarsH minęło kilka lat od tego pytania, nie jestem pewien - mogłem przeczytać pytanie źle i byłem zdezorientowany.
Cody,

Dla każdego, kto teraz patrzy, .live został całkowicie usunięty z wersji 1.9 api.jquery.com/live/#live-events-handler . Użyj .change jako skrótu api.jquery.com/change/#change-handler
parttimeturtle

9

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


1
cerować! „dlaczego nie pomyślałem o tym” momencie. Dzięki!
ePharaoh

@Darryl To nie działało zgodnie z oczekiwaniami. Czasami zdarzenie jest wyzwalane, nawet zanim użytkownik dokończy wybór. Zobacz aktualizację dodaną do pytania.
ePharaoh

8
Umieszczenie programów obsługi zdarzeń na opcjach zakończy się niepowodzeniem we wszystkich wersjach IE! webbugtrack.blogspot.com/2007/11/…
scunliffe

8
zawodzi też w chromie :)
thinklinux

Działa w Firefox.
lezsakdomi

6

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>

5

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.


Możesz pozbyć się ostrzeżeń o rekwizytach, przekazując thiszamiast $(this). Jednak nie wyciągam z tego wszystkich zamierzonych zachowań; nie ostrzega, gdy ponownie wybiorę tę samą opcję.
Noumenon,

1
Uwaga: onchange jest uruchamiany podczas dodawania opcji usuwania do zaznaczonego pola za pomocą JS. Nie tylko wtedy, gdy użytkownik wybierze przedmiot
zanderwar

@Noumenon Naprawiłem błędy w tym, jeśli nadal jest to pomocne. Myślę, że testowałem to w samej aplikacji, a kiedy go skopiowałem, zapomniałem zmienić nazwę zmiennej. Powinien działać w edytorze i mieć teraz większy sens.
Tyler Stahlhuth

4

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>

4

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 .


Działa to z Chrome, ale nie z IE9: kiedy kliknę formant, jego tekst znika i nie rozwija się.
ChrisW,

Problem polega na tym, że nukuje on obecny wybór. Jeśli bieżącym wyborem jest B i kliknę menu rozwijane, obok A pojawi się znacznik wyboru! Ale A nie jest tak naprawdę wybrane, ponieważ jeśli ześlizgnę się z menu i zwolnię przycisk myszy (przerywanie menu), wybór stanie się pusty. Zaznaczenie jest również puste, jeśli wybierzesz tabulowanie do rozwijanego menu, co możesz łatwo zrobić, gdy przechodzisz do innej części formularza, nie spodziewając się, że zrobisz po tym jakieś obrażenia. (Naciśnij tab na swoim jsfiddle, a zobaczysz, co mam na myśli.)
skot

3

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.


Tak, musiałbym ... ale problem, z którym się zmagam, jest osobny, ortogonalny wobec poruszonej przez ciebie troski. Zdarzenie onclick w <option> jest uruchamiane, nawet zanim użytkownik dokończy wybór, co wydaje się uniemożliwiać jego użycie.
ePharaoh

Wydarzenia są uruchamiane w Chrome po naciśnięciu
klawisza

3

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.


2

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


2

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/


2
Ta sama wada, co w przypadku innych onfocus="this.selectedIndex=-1"rozwiązań: Bieżący wybór jest nokautowany, jeśli przechodzisz do elementu lub przechodzisz poza menu bez wybierania czegokolwiek. Naciśnij tab na skrzypcach, aby zobaczyć, co mam na myśli. (Zauważ też, że dostajesz pustą wartość, a nie „-”, gdy to robisz. To dlatego, selectedIndex=-1że nie możesz tego zrobić <option value="-1">; byłaby to niewielka poprawa w użyciu onfocus="this.selectedIndex=0". Jest to całkiem przyzwoite obejście, ale ja nie jak utrata obecnego wyboru tylko dlatego, że zajrzałem do menu, a nawet po prostu
zetknąłem się

2

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>


2

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

1

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.


1

użyj jquery:

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

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

1

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/


1
Nie działa w Safari ani Chrome na OS X. Alarm nigdy się nie uruchamia.
skot


1

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ę


Nie działa dla mnie w Safari lub Chrome dla OS X. jsfiddle.net/drskot/wLvL4pkw
skot

1

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


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


0

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>

0

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>

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

0

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


0

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.


0

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

-1

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


-1

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

-1

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.