Maison > interface Web > js tutoriel > Explication détaillée des événements déclencheurs lorsque l'option spécifiée est sélectionnée dans select

Explication détaillée des événements déclencheurs lorsque l'option spécifiée est sélectionnée dans select

小云云
Libérer: 2018-03-17 15:17:54
original
11291 Les gens l'ont consulté

Lorsque nous utilisons la sélection de la liste déroulante, nous devons déclencher un événement pour l'option

Si nous voulons obtenir toutes les valeurs de select, nous pouvons utiliser une boucle for pour y parvenir. Le code est le suivant :

var vi = document.all['list'].length;
for(var i=0;i<vi;i++){
document.form2.list(i).value; //form2是<form>的名称
}
Copier après la connexion
js方法:
‍‍<select id="pid" onchange="gradeChange()">
    <option grade="1" value="a">选项一</a>
    <option grade="2" value="b">选项二</a>
</select>
<script type="text/JavaScript">
       function gradeChange(){
        var objS = document.getElementById("pid");
        var grade = objS.options[objS.selectedIndex].grade;
        alert(grade);
       }
</script>
jq方法:
<select name="myselect" id="myselect">
    <option value="opt1">选项1</option>
    <option value="opt2">选项2</option>
    <option value="opt3">选项3</option>
</select>
 
$("#myselect").change(function(){
    var opt=$("#myselect").val();
    ...
});
Copier après la connexion

Javascript récupère la valeur sélectionnée dans la liste déroulante de sélection
Il y a maintenant une liste déroulante avec id=test, comment obtenir le valeur sélectionnée ?
Utilisez respectivement les méthodes natives javascript et les méthodes jquery

<select id="test"  name="">   
  <option   value="1">text1</option>   
  <option   value="2">text2</option>   
 </select>
Copier après la connexion

1 : Méthodes natives JavaScript
1 : Obtenez l'objet select : var myselect=document.getElementById("test" );
2 : Récupère l'index de l'élément sélectionné : var index=myselect.selectedIndex; // selectedIndex représente l'index de l'élément sélectionné
3 : Récupère la valeur des options de l'élément sélectionné : myselect.options[ index] .value;
4 : Récupère le texte des options de l'élément sélectionné : myselect.options[index].text;
2 : méthode jquery (à condition que la bibliothèque jquery ait été chargée)
1 : options var =$("#test option:selected"); //Obtenir l'élément sélectionné
2:console.log(options.val()); //Obtenir la valeur de l'élément sélectionné
3:console. log (options.text()); //Obtenir le texte de l'élément sélectionné

Recommandations associées :

Comment gérer la superposition d'options de select

Javascript supprime toutes les options dans le partage de code sélectionné

Comment définir la sélection par défaut pour les options de sélection dans HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal