Explication détaillée de la façon de définir les options sélectionnées par défaut pour la balise <select> en HTML-tutoriel HTML-php.cn

Maison > interface Web > tutoriel HTML > le corps du texte

Explication détaillée de la façon de définir les options sélectionnées par défaut pour la balise . Cette méthode peut contrôler les résultats de sortie en arrière-plan selon les besoins dans des langages dynamiques tels que php.

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

Copier après la connexion

La deuxième méthode consiste à contrôler l'élément sélectionné via le front-end js :

< 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()"  />

Copier après la connexion

Le code js pour obtenir le texte de l'élément sélectionné dans l'étiquette sont les suivantes :

1) Créer dynamiquement select

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

Copier après la connexion

2) Ajouter une option

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

Copier après la connexion

3) Supprimer toutes les options

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

Copier après la connexion

4) Supprimer une option

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

Copier après la connexion

5) Récupérer la valeur de l'option

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

Copier après la connexion

6) Récupérer le texte de l'option

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

Copier après la connexion

7) Modifier l'option option

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

Copier après la connexion

8) Supprimer la sélection

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

Copier après la connexion

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：

html select 如何

source：php.cn

Article précédent：Exemple d'analyse de la façon de conserver les espaces et les sauts de ligne dans les pages HTML Article suivant：Comment apprendre le développement front-end à partir de zéro

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

Derniers articles par auteur