So übergeben Sie Parameter an onChange von HTML Select

197

Ich bin ein Anfänger bei JavaScript und jQuery. Ich möchte eine Combobox-A anzeigen , bei der es sich um einen HTML- Code handelt, <select>dessen Auswahl idund Inhalt an der anderen Stelle auf onChange () angezeigt werden.

Wie kann ich die komplette Combobox mit ihrer Auswahl übergeben idund wie kann ich andere Parameter im Feuer des onChange-Ereignisses übergeben?

Gendaful
quelle
5
Kannst du bitte einen Code posten?
KJYe.Name 葉家仁

Antworten:

370

function getComboA(selectObject) {
  var value = selectObject.value;  
  console.log(value);
}
<select id="comboA" onchange="getComboA(this)">
  <option value="">Select combo</option>
  <option value="Value1">Text1</option>
  <option value="Value2">Text2</option>
  <option value="Value3">Text3</option>
</select>

Im obigen Beispiel erhalten Sie den ausgewählten Wert des Kombinationsfelds für das OnChange- Ereignis.

Piyush Mattoo
quelle
Danke, das hat bei mir funktioniert. Grundsätzlich möchte ich die gleiche Combobox an verschiedenen Orten anzeigen, also habe ich 2 Comboboxs 2 verschiedene IDs gegeben. Gibt es sowieso, dass ich dieselbe Combobox an verschiedenen Orten zeigen kann. Jede Hilfe wird sehr geschätzt.
Gendaful
13
Ein prägnanterer Weg, um den Wert im Inneren abzurufen, getComboA()istvar value = sel.value;
Yony
4
Das Änderungsereignis wird nur ausgelöst, wenn das Auswahlfeld den Fokus verliert. Gibt es eine Möglichkeit, das Ereignis unmittelbar nach einer Wertänderung auszulösen?
doABarrelRoll721
2
Verwenden Sie stattdessen this.value und es wird funktionieren =) Wenn Sie dies senden, wird das gesamte Auswahlelement gesendet
Colin Rickels
In meinem Fall funktioniert Code unter Firefox, jedoch nicht unter Chrome.
Avijit Bhattacharjee
50

Ein anderer Ansatz, der in einigen Situationen nützlich sein kann, besteht darin, den Wert der ausgewählten <option />Funktion direkt an die folgende Funktion zu übergeben:

function myFunction(chosen) {
  console.log(chosen);
}
<select onChange="myFunction(this.options[this.selectedIndex].value)">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>

Cazuma Nii Cavalcanti
quelle
1
Das war genau das, was ich brauchte. Hatte bereits eine Javascript-Funktion, die die Farbbilder beim Klicken auf Farbfelder änderte. Hatte aber die Bitte, auch an den PayPal-Dropdown-Auswahloptionen zu arbeiten. Ich habe dies verwendet, aber anstatt 'value' zu verwenden (da ich es für Paypal benötigte), habe ich jeder Option ein 'label' mit den Variablennamen hinzugefügt, mit denen ich die Bilder geändert habe. Hat perfekt funktioniert! Vielen Dank!!
FlashNoob468
5
Das ist nett. Eine andere einfachere und gültige Option ist: <select onChange = "myFunction (this.value)">
Daniel Silva
1
Nützlich, um auf andere Attribute der ausgewählten Option zuzugreifen.
Cees Timmerman
31

So geht's in jQuery:

<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>

<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
  alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>

Sie sollten auch wissen, dass Javascript und jQuery nicht identisch sind. jQuery ist gültiger JavaScript-Code, aber nicht alles JavaScript ist jQuery. Sie sollten die Unterschiede nachschlagen und sicherstellen, dass Sie die entsprechende verwenden.

aiham
quelle
2
Ich habe dies versucht, aber die Änderungsfunktion wird nicht aufgerufen, selbst wenn ich die Methode document.ready eingebe. Mein Code ist htmlData.push ('<select id = "Choose" name = "Choose">'); $ ('# wähle'). change (function () {alert ('change Called'); alert ('Die Option mit dem Wert' + $ (this) .value () + 'und text' + $ (this). text () + 'wurde ausgewählt.'); Bitte helfen Sie mir dabei.
Gendaful
@Gendaful: htmlData.push($('<select id="choose" name="choose">'));sollte den Trick machen (Sie haben zuvor eine Zeichenfolge anstelle eines vollständigen Knotens gedrückt). > 6 Jahre vergingen ...
Johannes
6

JavaScript-Lösung

<select id="comboA">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
<script>
 document.getElementById("comboA").onchange = function(){
    var value = document.getElementById("comboA").value;
 };
</script>

oder

<script>
 document.getElementById("comboA").onchange = function(evt){
    var value = evt.target.value;
 };
</script>

oder

<script>
 document.getElementById("comboA").onchange = handleChange;

 function handleChange(evt){
    var value = evt.target.value;
 };
</script>
RobertKim
quelle
Dies ist hier die allgemeinste und umfassendste Lösung. Vielen Dank!
divs1210
5

Ich fand die Antwort von @ Piyush hilfreich, und nur um sie zu ergänzen: Wenn Sie programmgesteuert eine Auswahl erstellen, gibt es einen wichtigen Weg, um dieses Verhalten zu erreichen, der möglicherweise nicht offensichtlich ist. Angenommen, Sie haben eine Funktion und erstellen eine neue Auswahl:

var changeitem = function (sel) {
  console.log(sel.selectedIndex);
}
var newSelect = document.createElement('select');
newSelect.id = 'newselect';

Das normale Verhalten kann zu sagen sein

newSelect.onchange = changeitem;

Auf diese Weise können Sie das übergebene Argument jedoch nicht wirklich angeben. Stattdessen können Sie Folgendes tun:

newSelect.setAttribute('onchange', 'changeitem(this)');

Und Sie können den Parameter einstellen. Wenn Sie dies auf die erste Weise tun, ist das Argument, das Sie für Ihre onchangeFunktion erhalten, browserabhängig. Der zweite Weg scheint browserübergreifend zu funktionieren.

Michael Plautz
quelle
1
Ihre böse evalString-zu-Code-Konvertierung ist nicht erforderlich. Funktioniert tatsächlich newSelect.onchange = changeitem;einwandfrei, wenn Sie changeitem als neu schreiben var changeitem = function () {console.log(this.selectedIndex); };(dh thisanstelle eines Funktionsarguments verwenden). Oder lassen Sie changeitemwie es ist und schreiben Sie newSelect.onchange = function () {changeitem(this); };.
Steve Byrnes
1
newSelect.setAttribute ('onchange', 'changeitem (this)'); -
Prost dafür
5

jQuery-Lösung

Wie erhalte ich den Textwert einer ausgewählten Option?

Ausgewählte Elemente haben normalerweise zwei Werte , auf die Sie zugreifen möchten.
Zuerst muss der Wert an den Server gesendet werden, was einfach ist:

$( "#myselect" ).val();
// => 1

Der zweite ist der Textwert der Auswahl.
Verwenden Sie beispielsweise das folgende Auswahlfeld:

<select id="myselect">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Ms</option>
  <option value="4">Dr</option>
  <option value="5">Prof</option>
</select>

Wenn Sie die Zeichenfolge "Mr" erhalten möchten, wenn die erste Option ausgewählt wurde (anstelle von "1"), gehen Sie folgendermaßen vor:

$( "#myselect option:selected" ).text();
// => "Mr"  

Siehe auch

Aniket Kulkarni
quelle
5

Das wird mir geholfen.

Zur Auswahl:

$('select_tags').on('change', function() {
    alert( $(this).find(":selected").val() );
});

Für Radio / Checkbox:

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});
ilgam
quelle
3

Sie können den folgenden Code ausprobieren

<select onchange="myfunction($(this).val())" id="myId">
    </select>
Feyyaz Acet
quelle
1

Wenn ich diesen Code schreibe, um nur das onChange-Ereignis von select zu erklären, können Sie diesen Code als HTML speichern und sehen, dass die Ausgabe funktioniert. Und für Sie leicht verständlich.

<html>
    <head>
        <title>Register</title>
    </head>
    <body>
    <script>
        function show(){
            var option = document.getElementById("category").value;
            if(option == "Student")
                  {
                        document.getElementById("enroll1").style.display="block";
                  }
            if(option == "Parents")
                  {
                        document.getElementById("enroll1").style.display="none";
                  }
            if(option == "Guardians")
                  {
                        document.getElementById("enroll1").style.display="none";
                  }
        }
    </script>
            <form action="#" method="post">
                <table>
                    <tr>
                        <td><label>Name </label></td>
                        <td><input type="text" id="name" size=20 maxlength=20 value=""></td>
                    </tr>
                    <tr style="display:block;" id="enroll1">
                        <td><label>Enrollment No. </label></td>
                        <td><input type="number" id="enroll" style="display:block;" size=20 maxlength=12 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Email </label></td>
                        <td><input type="email" id="emailadd" size=20 maxlength=25 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Mobile No. </label></td>
                        <td><input type="number" id="mobile" size=20 maxlength=10 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Address</label></td>
                        <td><textarea rows="2" cols="20"></textarea></td>
                    </tr>
                    <tr >
                        <td><label>Category</label></td>
                        <td><select id="category" onchange="show()">    <!--onchange show methos is call-->
                                <option value="Student">Student</option>
                                <option value="Parents">Parents</option>
                                <option value="Guardians">Guardians</option>
                            </select>
                        </td>
                    </tr>
                </table><br/>
            <input type="submit" value="Sign Up">
        </form>
    </body>
</html>
Piyush
quelle
1

Nur für den Fall, dass jemand nach einer React-Lösung sucht, ohne zusätzliche Abhängigkeiten herunterladen zu müssen, können Sie Folgendes schreiben:

<select onChange={this.changed(this)}>
   <option value="Apple">Apple</option>
   <option value="Android">Android</option>                
</select>

changed(){
  return e => {
    console.log(e.target.value)
  }
}

Stellen Sie sicher, dass Sie die Funktion defined () im Konstruktor wie folgt binden:

this.changed = this.changed.bind(this);
RawBData
quelle
0

Das hat bei mir funktioniert onchange = setLocation($(this).val())

Hier.

    @Html.DropDownList("Demo", 
new SelectList(ViewBag.locs, "Value", "Text"), 
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });
Deepak Singla
quelle