wake-up-neo.com

Wie werden Parameter an onChange von html select übergeben?

Ich bin ein Neuling bei JavaScript und jQuery. Ich möchte eine Combobox-A anzeigen, die ein HTML <select> mit dem ausgewählten id und Inhalt an anderer Stelle von onChange () ist. 

Wie kann ich die komplette Combobox mit ihrem select id übergeben, und wie kann ich andere Parameter des onChange-Ereignisses übergeben?

154
Gendaful
function getComboA(selectObject) {
    var value = selectObject.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 OnChange event.

298
Piyush Mattoo

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

<select onChange="myFunction(this.options[this.selectedIndex].value)">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>
41

Wie man es in jQuery macht:

<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, jedoch ist nicht alles JavaScript jQuery. Sie sollten die Unterschiede feststellen und sicherstellen, dass Sie den entsprechenden verwenden.

30
aiham

Ich fand die Antwort von @ Piyush hilfreich, und wenn Sie einfach eine Auswahl programmgesteuert erstellen, gibt es einen wichtigen Weg, um dieses Verhalten zu erhalten, das nicht offensichtlich ist. Nehmen wir an, 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 man sagen

newSelect.onchange = changeitem;

Damit 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 es auf die erste Weise tun, ist das Argument, das Sie zu Ihrer onchange-Funktion erhalten, vom Browser abhängig. Der zweite Weg scheint Cross-Browser gut zu funktionieren.

5
Michael Plautz

jQuery-Lösung

Wie erhalte ich den Textwert einer ausgewählten Option

Auswahlelemente haben normalerweise zwei Werte, auf die Sie zugreifen möchten.
Zuerst muss der value an den Server gesendet werden, was einfach ist: 

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

Der zweite ist der text-Wert 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"), würden Sie dies folgendermaßen tun: 

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

Siehe auch

5
Aniket Kulkarni

Das wird mir geholfen.

Für wählen:

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

Für Radio/Checkbox:

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

Sie können den folgenden Code ausprobieren 

<select onchange="myfunction($(this).val())" id="myId">
    </select>
3
feyyaz acet

Das funktionierte für mich onchange = "setLocation ($ (this) .val ())" 

Hier..

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

0
Deepak Singla

wenn ich diesen Code erst einmal schreibe, um nur das onChange-Ereignis select zu erläutern, können Sie diesen Code als HTML-Code speichern und die Ausgabe sehen, die 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>
0
Piyush

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