Come passare i parametri su onChange di html select


198

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?


5
puoi pubblicare del codice per favore?
KJYe.Name 葉家仁

Risposte:


371

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 .


Grazie, questo ha funzionato per me. Fondamentalmente voglio mostrare la stessa casella combinata in un posto diverso, quindi ho dato 2 ID diversi a 2 casella combinata. C'è comunque, che posso mostrare la stessa casella combinata in un posto diverso. Qualsiasi aiuto sarà molto apprezzato.
Gendaful,

13
Un modo più conciso per recuperare il valore all'interno getComboA()èvar value = sel.value;
Yony,

4
L'evento di modifica viene generato solo se la casella di selezione perde lo stato attivo. C'è un modo per attivare l'evento immediatamente dopo la modifica di un valore?
doABarrelRoll721,

2
usa questo.value invece e funzionerà =) inviando questo sta inviando l'intero elemento selezionato
Colin Rickels,

Nel mio caso, il codice funziona su Firefox ma non su Chrome.
avijit bhattacharjee,

50

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>


1
Questo era esattamente ciò di cui avevo bisogno. Aveva già una funzione javascript che cambiava le immagini a colori quando si fa clic sui campioni di colore. Ma aveva una richiesta per farlo funzionare anche con le opzioni di selezione del menu a discesa PayPal. Ho usato questo ma invece di usare 'value' (dato che ne avevo bisogno per Paypal) ho aggiunto una 'etichetta' ad ogni opzione con i nomi delle variabili che ho usato per cambiare le immagini. Ha funzionato perfettamente! Grazie!!
FlashNoob468,

5
Questo è carino. Un'altra opzione più semplice è valida: <select onChange = "myFunction (this.value)">
Daniel Silva,

1
Utile per accedere ad altri attributi dell'opzione selezionata.
Cees Timmerman,

31

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.


2
Ho provato questo, ma la funzione di modifica non viene chiamata anche se ho inserito il metodo document.ready. Il mio codice è htmlData.push ('<select id = "scegli" name = "scegli">'); $ ('# scegli'). change (function () {alert ('change chiama'); alert ('L'opzione con valore' + $ (this) .value () + 'e text' + $ (this). text () + 'è stato selezionato.'); Per favore, aiutatemi con questo.
Gendaful,

@Gendaful: htmlData.push($('<select id="choose" name="choose">'));dovresti fare il trucco (hai premuto una stringa invece di un nodo completo prima). > 6 anni trascorsi ...
Johannes,

6

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>

Questa è la soluzione più generale e completa qui. Grazie!
divs1210

5

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.


1
La evalconversione da stringa a codice malvagia non è necessaria. newSelect.onchange = changeitem;Funziona davvero bene se si riscrive changeitem come var changeitem = function () {console.log(this.selectedIndex); };(cioè usando thisinvece di un argomento di funzione). Oppure, lascia così changeitemcom'è e scrivi newSelect.onchange = function () {changeitem(this); };.
Steve Byrnes

1
newSelect.setAttribute ('onchange', 'changeitem (this)'); - evviva per questo
ghosh

5

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


5

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

3

Puoi provare il codice qui sotto

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

1

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>

1

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

0

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())" });
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.