Explication détaillée de la façon de définir la sélection par défaut de la balise select

Cet article partage principalement avec vous une méthode d'option pour définir l'option sélectionnée par défaut de la balise select. Il a une bonne valeur de référence et j'espère qu'il pourra aider tout le monde.

Il existe deux méthodes.

La première méthode consiste à définir l'élément sélectionné via l'attribut . Cette méthode peut contrôler les résultats de sortie selon les besoins en arrière-plan 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 >

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

Le code js pour obtenir le texte de l'élément sélectionné dans le fichier

label est :

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

Certaines autres techniques pour utiliser la balise sont les suivantes :

1) Créer dynamiquement select

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

2) Ajouter option option

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

3) Supprimer toutes les options option

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

4) Supprimer une option option

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

5) Obtenir la valeur de l'option option

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

6) Obtenir le texte de l'option

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

7) Modifier l'option

var obj=document.getElementById( 'mySelect' );
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);
}

Recommandations associées :

Quelles sont les utilisations des balises de sélection en HTML

JQuery pour obtenir le contenu textuel de plusieurs options de balises de sélection (exemple )

js Explication détaillée de la façon d'obtenir la valeur de la balise select

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

Article précédent：FileReader implémente l'aperçu local avant de télécharger des imagesArticle suivant：FileReader implémente l'aperçu local avant de télécharger des images

Articles Liés

Voir plus

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nousClause de non-responsabilitéSitemap

© php.cn All rights reserved