Sono alle prime armi con JavaScript e jQuery. Voglio mostrare una combobox-A, che è un HTML <select>con i suoi selezionati ide il contenuto nell'altra posizione su onChange ().

Come posso passare la casella combinata completa con la sua selezione ide come posso passare altri parametri al fuoco dell'evento onChange?

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>

L'esempio sopra ti dà il valore selezionato della casella combinata sull'evento OnChange .

Un altro approccio che può essere utile in alcune situazioni è il passaggio del valore selezionato <option />direttamente alla funzione in questo modo:

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>

Per come farlo 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>

Dovresti anche sapere che Javascript e jQuery non sono identici. jQuery è un codice JavaScript valido, ma non tutto JavaScript è jQuery. Dovresti cercare le differenze e assicurarti di utilizzare quella appropriata.

Soluzione JavaScript

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

o

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

o

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

 function handleChange(evt){
    var value = evt.target.value;
 };
</script>

Ho trovato utile la risposta di @ Piyush, e solo per aggiungerla, se si crea programmaticamente una selezione, allora c'è un modo importante per ottenere questo comportamento che potrebbe non essere ovvio. Supponiamo che tu abbia una funzione e crei una nuova selezione:

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

Il comportamento normale potrebbe essere quello di dire

newSelect.onchange = changeitem;

Ma questo non ti consente davvero di specificare quell'argomento passato, quindi puoi farlo:

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

E sei in grado di impostare il parametro. Se lo fai nel primo modo, l'argomento che otterrai alla tua onchangefunzione dipenderà dal browser. Il secondo modo sembra funzionare bene su più browser.

soluzione jQuery

Come ottengo il valore di testo di un'opzione selezionata

Gli elementi di selezione in genere hanno due valori a cui si desidera accedere.
Innanzitutto c'è il valore da inviare al server, il che è semplice:

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

Il secondo è il valore di testo della selezione.
Ad esempio, utilizzando la seguente casella di selezione:

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

Se si desidera ottenere la stringa "Mr" se è stata selezionata la prima opzione (anziché solo "1"), lo si farebbe nel modo seguente:

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

Guarda anche

• .val () Documentazione API jQuery

Questo è aiutato per me.

Per selezionare:

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

Per radio / casella di controllo:

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

Puoi provare il codice qui sotto

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

questo codice una volta che scrivo per spiegare semplicemente l'evento onChange di select puoi salvare questo codice come html e vedere come funziona l'output e facile da capire per te.

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

Nel caso in cui qualcuno stia cercando una soluzione React senza dover scaricare dipendenze di addizione potresti scrivere:

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

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

Assicurati di associare la funzione change () nel costruttore come:

this.changed = this.changed.bind(this);

Questo ha funzionato per me onchange = setLocation($(this).val())

Qui.

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