Gibt es ein onSelect-Ereignis oder ein gleichwertiges Ereignis für HTML <select>?

Ich habe ein Eingabeformular, mit dem ich aus mehreren Optionen auswählen und etwas tun kann, wenn sich der Benutzer ändert die Auswahl . Z.B,

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

Wird jetzt doSomething()nur bei der Auswahl ausgelöst ändert .

Ich möchte auslösen, doSomething()wenn der Benutzer eine Option auswählt, möglicherweise die dieselbe .

Ich habe versucht, einen "onClick" -Handler zu verwenden, der jedoch ausgelöst wird, bevor der Benutzer den Auswahlprozess startet.

Gibt es also eine Möglichkeit, bei jeder Auswahl durch den Benutzer eine Funktion auszulösen?

Aktualisieren:

Die von Darryl vorgeschlagene Antwort schien zu funktionieren, funktioniert aber nicht konsequent. Manchmal wird das Ereignis ausgelöst, sobald der Benutzer auf das Dropdown-Menü klickt, noch bevor der Benutzer den Auswahlvorgang abgeschlossen hat!

Hier ist der einfachste Weg:

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

Funktioniert sowohl mit der Mausauswahl als auch mit den Auf- / Ab-Tasten der Tastatur, wenn die Auswahl fokussiert ist.

Ich brauchte genau das Gleiche. Das hat bei mir funktioniert:

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

Unterstützt dies:

Wenn der Benutzer eine Option auswählt, möglicherweise dieselbe

Ich hatte das gleiche Problem, als ich vor ein paar Monaten ein Design entwarf. Die Lösung, die ich gefunden habe, bestand darin, sie .live("change", function())in Kombination mit .blur()dem von Ihnen verwendeten Element zu verwenden.

Wenn Sie möchten, dass es etwas tut, wenn der Benutzer einfach klickt, anstatt es zu ändern, ersetzen Sie es einfach change mit click.

Ich habe meinem Dropdown eine ID zugewiesen, selected und Folgendes verwendet:

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

Ich sah, dass dieser keine ausgewählte Antwort hatte, also dachte ich mir, ich würde meinen Input geben. Das hat bei mir hervorragend funktioniert, also kann hoffentlich jemand anderes diesen Code verwenden, wenn er nicht weiterkommt.

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

Bearbeiten: Verwenden Sie den onSelektor im Gegensatz zu .live. Siehe jQuery .on ()

Nur eine Idee, aber ist es möglich, jedes <option>Element mit einem Klick zu versehen?

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

Eine andere Option könnte darin bestehen, onblur für die Auswahl zu verwenden. Dies wird immer dann ausgelöst, wenn der Benutzer von der Auswahl weg klickt. An diesem Punkt können Sie bestimmen, welche Option ausgewählt wurde. Damit dies sogar zum richtigen Zeitpunkt ausgelöst wird, kann das Klicken durch Klicken auf die Option das Feld verwischen (etwas anderes aktivieren oder nur .blur () in jQuery).

Der Onclick-Ansatz ist nicht ganz schlecht, wird aber wie gesagt nicht ausgelöst, wenn der Wert nicht per Mausklick geändert wird.
Es ist jedoch möglich, das Ereignis onclick im Ereignis onchange auszulösen.

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

Ich werde die Antwort von Jitbit erweitern. Ich fand es seltsam, als Sie auf das Dropdown-Menü klickten und dann auf das Dropdown-Menü klickten, ohne etwas auszuwählen. Endete mit etwas in der Art von:

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>

Dies ist für den Benutzer etwas sinnvoller und ermöglicht die Ausführung von JavaScript jedes Mal, wenn er eine Option einschließlich einer früheren Option auswählt.

Der Nachteil dieses Ansatzes besteht darin, dass die Möglichkeit, auf ein Dropdown-Menü zuzugreifen und den Wert mit den Pfeiltasten auszuwählen, unterbrochen wird. Dies war für mich akzeptabel, da alle Benutzer bis zum Ende der Ewigkeit ständig auf alles klicken.

Wenn Sie dies wirklich brauchen, um so zu funktionieren, würde ich dies tun (um sicherzustellen, dass es mit Tastatur und Maus funktioniert)

• Fügen Sie der Auswahl einen Onfocus-Ereignishandler hinzu, um den "aktuellen" Wert festzulegen
• Fügen Sie der Auswahl einen Onclick-Ereignishandler hinzu, um Mausänderungen zu verarbeiten
• Fügen Sie der Auswahl einen onkeypress-Ereignishandler hinzu, um Tastaturänderungen zu verarbeiten

Leider wird der Onclick mehrmals ausgeführt (z. B. beim Öffnen der Auswahl ... und beim Auswählen / Schließen) und der Onkeypress wird möglicherweise ausgelöst, wenn sich nichts ändert ...

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

Um ein Ereignis jedes Mal richtig auszulösen, wenn der Benutzer etwas auswählt (sogar dieselbe Option), müssen Sie nur das Auswahlfeld austricksen.

Wie andere gesagt haben, geben Sie ein Negativ an selectedIndex im Fokus an, um das Änderungsereignis zu erzwingen. Auf diese Weise können Sie das Auswahlfeld zwar austricksen, danach funktioniert es jedoch nicht mehr, solange es noch fokussiert ist. Die einfache Lösung besteht darin, das Auswahlfeld zu zwingen, zu verwischen (siehe unten).

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

Sie können hier eine funktionierende Demo sehen .

Tatsächlich werden die Onclick-Ereignisse NICHT ausgelöst, wenn der Benutzer die Auswahl im Auswahlsteuerelement über die Tastatur ändert. Möglicherweise müssen Sie eine Kombination aus onChange und onClick verwenden, um das gewünschte Verhalten zu erzielen.

Dies beantwortet Ihre Frage möglicherweise nicht direkt, aber dieses Problem kann durch einfache Anpassungen der Designebene gelöst werden. Ich verstehe, dass dies möglicherweise nicht zu 100% auf alle Anwendungsfälle anwendbar ist, aber ich empfehle Ihnen dringend, Ihren Benutzerfluss Ihrer Anwendung zu überdenken und zu prüfen, ob der folgende Entwurfsvorschlag implementiert werden kann.

Ich beschloss, etwas Einfaches zu tun, als Alternativen zu hacken, um onChange()andere Ereignisse zu verwenden, die nicht wirklich für diesen Zweck gedacht waren ( blur,click usw.)

So habe ich es gelöst:

Stellen Sie einfach ein Platzhalter-Options-Tag wie select vor, das keinen Wert hat.

Anstatt nur die folgende Struktur zu verwenden, die Hack-y-Alternativen erfordert:

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

Erwägen Sie Folgendes:

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

Auf diese Weise wird Ihr Code viel einfacher und onChangefunktioniert wie erwartet, jedes Mal, wenn der Benutzer entscheidet, etwas anderes als den Standardwert auszuwählen. Sie können das disabledAttribut sogar zur ersten Option hinzufügen, wenn Sie nicht möchten, dass sie es erneut auswählen, und sie zwingen, etwas aus den Optionen auszuwählen, wodurch ein ausgelöst wirdonChange() Feuer .

Zum Zeitpunkt dieser Antwort schreibe ich eine komplexe Vue-Anwendung und habe festgestellt, dass diese Designauswahl meinen Code erheblich vereinfacht hat. Ich habe Stunden mit diesem Problem verbracht, bevor ich mich für diese Lösung entschieden habe, und ich musste nicht viel von meinem Code neu schreiben. Wenn ich mich jedoch für die hackigen Alternativen entschieden hätte, hätte ich die Randfälle berücksichtigen müssen, um ein doppeltes Auslösen von Ajax-Anfragen usw. zu verhindern. Dies bringt auch das Standardverhalten des Browsers nicht als netten Bonus durcheinander (auf Mobilgeräten getestet) auch Browser).

Manchmal müssen Sie nur einen Schritt zurücktreten und über das Gesamtbild nachdenken, um die einfachste Lösung zu finden.

Was ich getan habe, als ich mit einem ähnlichen Problem konfrontiert wurde, ist, dass ich dem Auswahlfeld einen 'onFocus' hinzugefügt habe, der eine neue generische Option anfügt ('eine Option auswählen' oder etwas Ähnliches) und diese standardmäßig als ausgewählte Option verwendet.

Mein Ziel war es daher, denselben Wert mehrmals auswählen zu können, wodurch die Funktion onchange () im Wesentlichen überschrieben und in eine nützliche Methode onclick () umgewandelt wird.

Aufgrund der obigen Vorschläge habe ich mir das ausgedacht, was für mich funktioniert.

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

Zuerst verwenden Sie onChange als Ereignishandler und dann die Flag-Variable, damit es bei jeder Änderung die gewünschte Funktion ausführt

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

Fügen Sie als erste eine zusätzliche Option hinzu, z. B. die Kopfzeile einer Spalte. Dies ist der Standardwert der Dropdown-Schaltfläche, bevor Sie darauf klicken und am Ende zurücksetzen. doSomething()Wenn Sie also A / B / C auswählen, wird das Ereignis onchange immer ausgelöst. Wenn die Auswahl getroffen ist State, tun Sie nichts und kehren Sie zurück. onclickist sehr instabil, wie viele Leute zuvor erwähnt haben. Alles, was wir tun müssen, ist, eine anfängliche Schaltflächenbezeichnung zu erstellen, die sich von Ihren tatsächlichen Optionen unterscheidet, damit der Wechsel bei jeder Option funktioniert.

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

Das Wunderbare an dem Select-Tag (in diesem Szenario) ist, dass es seinen Wert aus den Options-Tags abruft.

Versuchen:

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

Arbeitete anständig für mich.

benutze jquery:

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

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

Hier ist meine Lösung, ganz anders als alle anderen hier. Es verwendet die Mausposition, um herauszufinden, ob eine Option angeklickt wurde, anstatt auf das Auswahlfeld zu klicken, um die Dropdown-Liste zu öffnen. Es verwendet die Position event.screenY, da dies die einzige zuverlässige browserübergreifende Variable ist. Zuerst muss ein Hover-Ereignis angehängt werden, damit die Steuerelementposition relativ zum Bildschirm vor dem Klickereignis ermittelt werden kann.

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

Hier ist meine jsFiddle http://jsfiddle.net/sU7EV/4/

Sie sollten versuchen, zu verwenden option:selected

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

Was funktioniert bei mir:

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

Auf diese Weise ruft onchange 'doSomething ()' auf, wenn sich die Option ändert, und onclick ruft 'doSomething ()' auf, wenn onchange event false ist, dh wenn Sie dieselbe Option auswählen

Versuchen Sie Folgendes (Ereignis wird genau ausgelöst, wenn Sie die Option auswählen, ohne die Option zu ändern):

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

Hier haben Sie den Index zurückgegeben, und im js-Code können Sie diese Rückgabe mit einem Schalter oder allem verwenden, was Sie wollen.

Versuche dies:

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

Würde dies vor langer Zeit, aber als Antwort auf die ursprüngliche Frage, helfen? Einfach onClickin die SELECTReihe stellen. Fügen Sie OPTIONdann in die OPTIONZeilen ein , was jeder tun soll . dh:

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

Ich hatte ein ähnliches Bedürfnis und schrieb schließlich eine eckige Direktive für dasselbe -

guthub link - eckige Auswahl

Wird verwendet element[0].blur();, um den Fokus vom Auswahl-Tag zu entfernen. Die Logik besteht darin, diese Unschärfe beim zweiten Klicken auf das Dropdown-Menü auszulösen.

as-select wird auch dann ausgelöst, wenn der Benutzer denselben Wert in der Dropdown-Liste auswählt.

DEMO - Link

Die einzig wahre Antwort besteht darin, das Auswahlfeld nicht zu verwenden (wenn Sie etwas tun müssen, wenn Sie dieselbe Antwort erneut auswählen).

Erstellen Sie ein Dropdown-Menü mit dem herkömmlichen Menü div, button, show / hide. Link: https://www.w3schools.com/howto/howto_js_dropdown.asp

Hätte vermieden werden können, wenn man den Optionen Ereignis-Listener hinzugefügt hätte. Wenn es einen onSelect-Listener für das Auswahlelement gegeben hätte. Und wenn das Klicken auf das Auswahlfeld nicht erschwerend ausgelöst hat, schalten Sie die Maus aus, klicken Sie mit der Maus und klicken Sie alle gleichzeitig auf die Maus.

Es gibt einige Dinge, die Sie hier tun möchten, um sicherzustellen, dass ältere Werte gespeichert werden und ein Änderungsereignis ausgelöst wird, auch wenn dieselbe Option erneut ausgewählt wird.

Das erste, was Sie möchten, ist ein reguläres onChange-Ereignis:

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

Damit das Ereignis onChange auch dann ausgelöst wird, wenn dieselbe Option erneut ausgewählt wird, können Sie die ausgewählte Option deaktivieren, wenn die Dropdown-Liste den Fokus erhält, indem Sie sie auf einen ungültigen Wert setzen. Sie möchten jedoch auch den zuvor ausgewählten Wert speichern, um ihn wiederherzustellen, falls der Benutzer keine neue Option auswählt:

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

Mit dem obigen Code können Sie eine Änderung auslösen, auch wenn derselbe Wert ausgewählt ist. Wenn der Benutzer jedoch außerhalb des Auswahlfelds klickt, möchten Sie den vorherigen Wert wiederherstellen. Wir machen es auf 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);
    }
});

Bitte beachten Sie, dass Event-Handler für das OPTION-Tag im IE nicht unterstützt werden. Denken Sie schnell darüber nach. Ich habe diese Lösung gefunden, probieren Sie sie aus und geben Sie mir Ihr Feedback:

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

Was ich hier tatsächlich mache, ist das Zurücksetzen des Auswahlindex, so dass das Ereignis onchange immer ausgelöst wird. Es stimmt, dass Sie das ausgewählte Element verlieren, wenn Sie darauf klicken, und es ist möglicherweise ärgerlich, wenn Ihre Liste lang ist, aber es kann Ihnen irgendwie helfen ..

Was ist mit dem Ändern des Werts der Auswahl, wenn das Element den Fokus erhält, z. B. (mit 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('');
    }
});

Ich habe diese Lösung herausgefunden.

Setzen Sie den selectedIndex des select-Elements zunächst auf 0

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

Rufen Sie diese Methode onChange-Ereignis auf