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!

Étiquettes associées：

select 设置 默认

source：php.cn

Article précédent：FileReader implémente l'aperçu local avant de télécharger des images Article suivant：Code d'implémentation pour JavaScript pour implémenter la fonction todolist

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

• Introduction à la dernière version de PHP Programmer Toolbox v1.0
  1970-01-01 08:00:00
• Explication détaillée de la directive personnalisée vue-cli pour ajouter un curseur de vérification
  1970-01-01 08:00:00
• Explication détaillée d'exemples de réception d'e-mails en utilisant IMAP avec PHP
  2023-03-19 18:36:02
• Partage de scénarios d'utilisation courants de Redis
  2023-03-21 07:36:01
• Explication détaillée de la conversion entre les nombres JS et les chaînes
  1970-01-01 08:00:00
• Exemple de partage d'ajout de liens de courrier électronique vers des pages Web Dreamweaver
  1970-01-01 08:00:00
• Introduction au filtre Vue et à son utilisation
  1970-01-01 08:00:00
• Partage de notes de connaissances de base PHP
  2023-03-20 14:32:01
• Explication détaillée de l'API du fichier d'applet WeChat
  1970-01-01 08:00:00
• Explication détaillée de la stratégie ajax et de même origine mise en œuvre par JS
  1970-01-01 08:00:00

Derniers numéros

SQL Count() nécessite également 0 Je n'ai qu'une seule table et je veux compter chaque entrée d'une balise qui commence par ...

Depuis 2024-04-06 19:48:53

0

1

449

sql groupby ne fonctionne pas, je veux regrouper par code_branch ->select('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameas...

Depuis 2024-04-06 19:24:49

0

2

488

Une erreur s'est produite lors de la tentative de récupération de la dernière version d'un package à partir de search.maven.org "Erreur : Impossible de récupérer les données du référentiel Maven" lors de la r...

Depuis 2024-04-05 12:11:23

0

1

1471

Modifier le style matSelect lors de l'affichage des options Comment modifier les propriétés de mat-select lorsque l'option est activée ? <mat-selec...

Depuis 2024-04-05 09:23:19

0

1

1374

Écho à l'intérieur d'un div avec écho imbriqué J'essaie d'utiliser echo<?phprequire'connect.php';$query=mysqli_query($conn,"SELEC...

Depuis 2024-04-04 11:09:23

0

1

390

Rubriques connexes

Plus>

• Tutoriel sur l'ajustement de l'espacement des lignes dans les documents Word
• La différence entre python et pycharm
• Quelles sont les méthodes de détection des vulnérabilités ASP ?
• méthode de suppression de fichier hiberfil
• Comment utiliser la balise blockquote
• Raisons pour lesquelles le chargement du CSS a échoué
• Plateforme de trading Bitcoin
• Comment demander un e-mail professionnel

Recommandations populaires

• que signifie js
• Comment convertir une chaîne en tableau en js ?
• Comment actualiser la page en utilisant javascript
• Comment supprimer un élément dans le tableau js
• Comment utiliser la fonction sqrt

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1408269
• 
  Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine

  4240812
• 
  Tutoriel vidéo JAVA pour débutants

  2438475
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  500379
• 
  Tutoriel d'introduction PHP base zéro

  838784

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1408269 temps d'étude
• 
  Tutoriel vidéo JAVA pour débutants

  2438475 temps d'étude
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  500379 temps d'étude
• 
  Introduction rapide au développement web front-end

  214607 temps d'étude
• 
  Maîtrisez les didacticiels vidéo PS à partir de zéro

  865829 temps d'étude

• 
  [Web front-end] Démarrage rapide de Node.js

  5274 temps d'étude
• 
  Collection complète de cours full-stack de développement Web étranger

  4062 temps d'étude
• 
  Aller au langage pratique GraphQL

  3477 temps d'étude
• 
  Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape

  575 temps d'étude
• 
  Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures

  17819 temps d'étude

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

• [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery
• [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3
• [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5
• [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery
• [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS
• [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique
• [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image
• [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

• [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

À propos de nous Clause de non-responsabilité Sitemap

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