Comment passer les paramètres sur onChange of html select


198

Je suis novice chez JavaScript et jQuery. Je veux montrer un combobox-A, qui est un HTML <select>avec son sélectionnéid et son contenu à l'autre endroit sur onChange ().

Comment puis-je passer la liste déroulante complète avec sa sélection id, et comment puis-je passer d'autres paramètres en feu de l'événement onChange?


5
pouvez-vous poster du code s'il vous plaît?
KJYe.Name 葉家仁

Réponses:


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'exemple ci-dessus vous obtient la valeur sélectionnée de la zone de liste déroulante lors d'un événement OnChange .


Merci, cela a fonctionné pour moi. Fondamentalement, je veux montrer la même zone de liste déroulante à un endroit différent, j'ai donc donné 2 identifiants différents à 2 zones de liste déroulante. Toute aide sera fortement appréciée.
Gendaful

13
Une façon plus succincte de récupérer la valeur à l'intérieur getComboA()estvar value = sel.value;
Yony

4
L'événement change ne se déclenche que si la zone de sélection perd le focus. Existe-t-il un moyen de déclencher l'événement immédiatement après la modification d'une valeur?
doABarrelRoll721

2
utilisez this.value à la place et cela fonctionnera =) envoyer ceci envoie tout l'élément select
Colin Rickels

Pour mon cas, le code fonctionne sur Firefox mais pas sur Chrome.
avijit bhattacharjee le

50

Une autre approche qui peut être pratique dans certaines situations consiste à transmettre <option />directement la valeur de l'élément sélectionné à la fonction comme ceci:

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
C'était exactement ce dont j'avais besoin. Avait déjà une fonction javascript qui changeait les images de couleur en cliquant sur les échantillons de couleur. Mais avait une demande pour qu'il fonctionne également sur les options de sélection de la liste déroulante PayPal. J'ai utilisé ceci mais au lieu d'utiliser 'value' (puisque j'en avais besoin pour Paypal) j'ai ajouté une 'étiquette' à chaque option avec les noms de variables que j'ai utilisés pour changer les photos. Fonctionne parfaitement! Merci!!
FlashNoob468 du

5
C'est sympa. Une autre option plus simple et valide est: <select onChange = "myFunction (this.value)">
Daniel Silva

1
Utile pour accéder aux autres attributs de l'option sélectionnée.
Cees Timmerman

31

Pour savoir comment le faire dans 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>

Vous devez également savoir que Javascript et jQuery ne sont pas identiques. jQuery est un code JavaScript valide, mais tout JavaScript n'est pas jQuery. Vous devez rechercher les différences et vous assurer que vous utilisez celui qui convient.


2
J'ai essayé cela, mais la fonction change n'est pas appelée même si je mets dans la méthode document.ready. Mon code est htmlData.push ('<select id = "choose" name = "choose">'); $ ('# choose'). change (function () {alert ('change called'); alert ('L'option avec la valeur' ​​+ $ (this) .value () + 'et le texte' + $ (this). text () + 'was selected.'); Aidez-moi s'il vous plait.
Gendaful

@Gendaful: htmlData.push($('<select id="choose" name="choose">'));devrait faire l'affaire (vous avez poussé une chaîne au lieu d'un nœud complet auparavant). > 6 ans se sont écoulés ...
Johannes

6

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

ou

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

ou

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

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

Il s'agit ici de la solution la plus générale et la plus complète. Merci!
divs1210

5

J'ai trouvé la réponse de @ Piyush utile, et pour ajouter à cela, si vous créez par programme une sélection, il existe un moyen important d'obtenir ce comportement qui peut ne pas être évident. Disons que vous avez une fonction et que vous créez une nouvelle sélection:

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

Le comportement normal peut être de dire

newSelect.onchange = changeitem;

Mais cela ne vous permet pas vraiment de spécifier cet argument passé, vous pouvez donc le faire à la place:

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

Et vous pouvez définir le paramètre. Si vous le faites de la première manière, l'argument que vous obtiendrez à votre onchangefonction dépendra du navigateur. La deuxième façon semble fonctionner très bien entre les navigateurs.


1
Votre evalconversion de chaîne en code diabolique n'est pas nécessaire. En fait , newSelect.onchange = changeitem;fonctionne très bien si vous changeitem comme réécrivez var changeitem = function () {console.log(this.selectedIndex); };(utilisation au thislieu d'un argument de fonction). Ou, laissez changeitemtel quel et écrivez newSelect.onchange = function () {changeitem(this); };.
Steve Byrnes

1
newSelect.setAttribute ('onchange', 'changeitem (this)'); -
Bravo

5

Solution jQuery

Comment obtenir la valeur texte d'une option sélectionnée

Les éléments de sélection ont généralement deux valeurs auxquelles vous souhaitez accéder.
Il y a d'abord la valeur à envoyer au serveur, ce qui est simple:

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

La seconde est la valeur de texte de la sélection.
Par exemple, en utilisant la case de sélection suivante:

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

Si vous vouliez obtenir la chaîne "Mr" si la première option était sélectionnée (au lieu de "1"), vous le feriez de la manière suivante:

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

Voir également


5

Cela m'a aidé.

Pour sélectionner:

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

Pour radio / case à cocher:

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

3

Vous pouvez essayer le code ci-dessous

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

1

ce code une fois que j'écris pour expliquer simplement l'événement onChange de select, vous pouvez enregistrer ce code en html et voir la sortie cela fonctionne.et facile à comprendre pour vous.

<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

Au cas où quelqu'un chercherait une solution React sans avoir à télécharger des dépendances supplémentaires, vous pourriez écrire:

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

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

Assurez-vous de lier la fonction changé () dans le constructeur comme:

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

0

Cela a fonctionné pour moi onchange = setLocation($(this).val())

Ici.

    @Html.DropDownList("Demo", 
new SelectList(ViewBag.locs, "Value", "Text"), 
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.