Maison  >  Article  >  interface Web  >  Comment définir l'option sélectionnée par défaut en fonction de la balise select ?

Comment définir l'option sélectionnée par défaut en fonction de la balise select ?

亚连
亚连original
2018-06-02 09:54:401904parcourir

Ci-dessous, je partagerai avec vous un article sur la façon de définir l'option sélectionnée par défaut pour la balise select. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Il existe deux méthodes.

Le premier définit l'élément sélectionné via l'attribut 221f08282418e2996498697df914ce4e. en php en arrière-plan selon Besoin de contrôler les résultats de sortie.

< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" selected = "selected" >2</ option >
< option value = "3" >3</ option >
</ select >

Le deuxième type consiste à contrôler l'élément sélectionné via js front-end :

< script type = "text/javascript" >
function change(){
  document.getElementById("sel")[2].selected=true;
}
</ script >
< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" >2</ option >
< option value = "3" >3</ option >
</ select >
< input type = "button" value = "修改" onclick = "change()" />

Le code js pour obtenir le texte de l'élément sélectionné dans la balise 221f08282418e2996498697df914ce4e est :

var val = document.all.Item.options[document.all.Item.selectedIndex].text
var i=document.getElementById( &#39;sel&#39; ).options[document.getElementById( &#39;sel&#39; ).selectedIndex].value;

Quelques autres conseils pour utiliser la balise 221f08282418e2996498697df914ce4e sont les suivants :

1) Créer dynamiquement sélectionnez

function createSelect(){
var mySelect = document.createElement( "select" );
mySelect.id = "mySelect" ;
document.body.appendChild(mySelect);
}

2) Ajouter une option option

function addOption(){
//根据id查找对象,
var obj=document.getElementById( &#39;mySelect&#39; );
//添加一个选项
obj.add( new Option( "文本" , "值" ));
}

3) Supprimer toutes les options

function removeAll(){
var obj=document.getElementById( &#39;mySelect&#39; );
obj.options.length=0;
}

4) Supprimer une option

function removeOne(){
var obj=document.getElementById( &#39;mySelect&#39; );
//index,要删除选项的序号,这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}

5) Obtenez la valeur de l'option

var obj=document.getElementById( &#39;mySelect&#39; );
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;

6) Obtenir le texte de l'option option

var obj=document.getElementById( &#39;mySelect&#39; );
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;

7) Modifier l'option option

var obj=document.getElementById( &#39;mySelect&#39; );
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]= new Option( "新文本" , "新值" );

8) Supprimer la sélection

function removeSelect(){
var mySelect = document.getElementById( "mySelect" );
mySelect.parentNode.removeChild(mySelect);
}

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

L'envoi d'une demande de publication via axios a révélé que springMVC ne pouvait pas recevoir de paramètres (tutoriel détaillé)

Passed Vue implémente l'ajout de composants axios pour résoudre le problème des paramètres nuls dans la publication (tutoriel détaillé)

Utilisez axios dans vue pour gérer le problème des paramètres de demande de publication (tutoriel détaillé)

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!

Déclaration:
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