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?

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.

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>

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.

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>

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.

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

• .val () jQuery API-Dokumentation

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

Sie können den folgenden Code ausprobieren

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

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>

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

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