Quelles sont les utilisations de la balise select en HTML ?

Cette fois, je vais vous montrer comment utiliser la balise select en HTML. Quelles sont les précautions lors de l'utilisation de la balise select en HTML. Voici un cas pratique, jetons un oeil. L'élément

select crée des menus à sélection unique ou multiple. Lorsque le formulaire est soumis, le navigateur soumet les éléments sélectionnés ou collecte plusieurs options séparées par des virgules, les combine en une seule liste de paramètres et inclut le nom lors de la soumission des données du formulaire >. 1. Utilisation de base :

Parmi elles, la balise peut être omise et utilisée dans la page

<select> 
<option value ="volvo">Volvo</option> 
<option value ="saab">Saab</option> 
<option value="opel">Opel</option> 
<option value="audi">Audi</option> 
</select>

Copier après la connexion

2. L'élément Select peut également être multi-sélectionné, voir le code suivant :

<SELECT NAME="studyCenter" id="studyCenter" SIZE="1"> 
<OPTION VALUE="0">全部 
<OPTION VALUE="1">湖北电大网络学习中心 
<OPTION VALUE="2">成都师范学院网络学习中心 
<OPTION VALUE="3">武汉职业技术学院网络学习中心 
</SELECT>

Copier après la connexion

1 Déterminez s'il existe un élément avec une valeur spécifiée dans l'option de sélection

//有multiple属性，则可以多选 
<select name= “education” id=”education” multiple=”multiple”> 
<option value=”1”>高中</option> 
<option value=”2”>大学</option> 
<option value=”3”>博士</option> 
</select> 
//下面没有multiple属性 , 只显示一条，不能多选 
<select name= “education” id=”education” > 
<option value=”1”>高中</option> 
<option value=”2”>大学</option> 
<option value=”3”>博士</option> 
</select> 
//下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据，注意不能多选的。 
<select name="education" id="education" size=&#39;3&#39;> 
<option value="0">小学</option> 
<option value="1">初中</option> 
<option value="2">高中</option> 
<option value="3">中专</option> 
<option value="4">大专</option> 
<option value="5">本科</option> 
<option value="6">研究生</option> 
<option value="7">博士</option> 
<option value="8">博士后</option> 
<option selected>请选择</option> 
</select>

Copier après la connexion

<🎜. >

2. Entrez l'option de sélection Ajouter un élément

@param objSelectId 将要验证的目标select组件的id 
@param objItemValue 将要验证是否存在的值 
function isSelectItemExit(objSelectId,objItemValue) { 
var objSelect = document.getElementById(objSelectId); 
var isExit = false; 
if (null != objSelect && typeof(objSelect) != "undefined") { 
for(var i=0;i<objSelect.options.length;i++) { 
if(objSelect.options[i].value == objItemValue) { 
isExit = true; 
break; 
} 
} 
} 
return isExit; 
}

Copier après la connexion

3

Supprimez l'

@param objSelectId 将要加入item的目标select组件的id @param objItemText 将要加入的item显示的内容 @param objItemValue 将要加入的item的值 function addOneItemToSelect(objSelectId,objItemText,objItemValue) { var objSelect = document.getElementById(objSelectId); if (null != objSelect && typeof(objSelect) != "undefined") { //判断是否该值的item已经在select中存在 if(isSelectItemExit(objSelectId,objItemValue)) { $.messager.alert('提示消息','该值的选项已经存在!','info'); } else { var varItem = new Option(objItemText,objItemValue); objSelect.options.add(varItem); } } }

Copier après la connexion

élément sélectionné des options de sélection, prend en charge la sélection multiple et la suppression multiple

<🎜. >
4. Supprimez un élément en fonction de la valeur spécifiée dans l'option de sélection

@param objSelectId 将要进行删除的目标select组件id 
function removeSelectItemsFromSelect(objSelectId) { 
var objSelect = document.getElementById(objSelectId); 
var delNum = 0; 
if (null != objSelect && typeof(objSelect) != "undefined") { 
for(var i=0;i<objSelect.options.length;i=i+1) { 
if(objSelect.options[i].selected) { 
objSelect.options.remove(i); 
delNum = delNum + 1; 
i = i - 1; 
} 
} 
if (delNum <= 0 ) { 
$.messager.alert(&#39;提示消息&#39;,&#39;请选择你要删除的选项!&#39;,&#39;info&#39;); 
} else { 
$.messager.alert(&#39;提示消息&#39;,&#39;成功删除了&#39;+delNum+&#39;个选项!&#39;,&#39;info&#39;); 
} 
} 
}

Copier après la connexion

5. Effacez toutes les options dans la sélection

.

@param objSelectId 将要验证的目标select组件的id 
@param objItemValue 将要验证是否存在的值 
function removeItemFromSelectByItemValue(objSelectId,objItemValue) { 
var objSelect = document.getElementById(objSelectId); 
if (null != objSelect && typeof(objSelect) != "undefined") { 
//判断是否存在 
if(isSelectItemExit(objSelect,objItemValue)) { 
for(var i=0;i<objSelect.options.length;i++) { 
if(objSelect.options[i].value == objItemValue) { 
objSelect.options.remove(i); 
break; 
} 
} 
$.messager.alert(&#39;提示消息&#39;,&#39;成功删除!&#39;,&#39;info&#39;); 
} else { 
$.messager.alert(&#39;提示消息&#39;,&#39;不存在指定值的选项!&#39;,&#39;info&#39;); 
} 
} 
}

Copier après la connexion

6. Récupérez les éléments dans la sélection Tous les éléments et assemblez toutes les valeurs dans une

chaîne

@param objSelectId 将要进行清空的目标select组件id 
function clearSelect(objSelectId) { 
var objSelect = document.getElementById(objSelectId); 
if (null != objSelect && typeof(objSelect) != "undefined") { 
for(var i=0;i<objSelect.options.length;) { 
objSelect.options.remove(i); 
} 
} 
}

Copier après la connexion

, séparées par des virgules

Je crois que vous avez maîtrisé la méthode après avoir lu ces cas, plus Veuillez faire attention aux autres articles connexes sur le site Web php chinois !

Lecture connexe :

@param objSelectId 目标select组件id 
@return select中所有item的值，值与值之间用逗号隔开 
function getAllItemValuesByString(objSelectId) { 
var selectItemsValuesStr = ""; 
var objSelect = document.getElementById(objSelectId); 
if (null != objSelect && typeof(objSelect) != "undefined") { 
var length = objSelect.options.length 
for(var i = 0; i < length; i = i + 1) { 
if (0 == i) { 
selectItemsValuesStr = objSelect.options[i].value; 
} else { 
selectItemsValuesStr = selectItemsValuesStr + "," + objSelect.options[i].value; 
} 
} 
} 
return selectItemsValuesStr; 
}

Copier après la connexion

Comment fixer la largeur du tableau : fixe

Définition de la largeur du tableau cell td Comment résoudre le problème

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：Comment utiliser le canevas HTML pour intercepter des images arrondies Article suivant：Paramètres des balises Textarea

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
  2018-06-11 11:57:34
• Comment gérer l'échec du routage vue.js
  2018-06-15 15:55:18
• Comment utiliser js pour analyser la base de données (avec code)
  2018-06-15 15:49:00
• Comment utiliser js pour lier les événements DOM dans le projet
  2018-06-15 15:46:15
• Comment utiliser les chaînes JS et les caractères spéciaux
  2018-06-15 15:42:38
• Comment utiliser chaque méthode dans jQuery dans un projet
  2018-06-15 15:40:34
• Comment utiliser jquery pour télécharger des fichiers
  2018-06-15 15:39:32
• Comment utiliser le prototype JS et la chaîne de prototypes
  2018-06-15 15:37:14
• Démonstration pratique du projet Angular CLI+Angular 5
  2018-06-15 15:34:21
• Remplacer les éléments de nœud à l'aide de jQuery (code ci-joint)
  2018-06-15 15:22:51

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 -&gt;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>

• symbole de droit d'auteur HTML
• éditeur HTML en ligne
• réalisation de pages web html
• espace HTML
• qu'est-ce que le HTML
• Comment définir la taille de la police HTML
• html en txt
• Comment écrire du code de zone de texte HTML

Recommandations populaires

• Que signifie l'URL ?
• Que signifie DOM ?
• Comment changer la taille de l'image
• Comment mettre la police en gras en HTML
• Comment définir la taille des images HTML

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)

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

  4265288
• 
  Tutoriel vidéo JAVA pour débutants

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

  506300
• 
  Tutoriel d'introduction PHP base zéro

  861442

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

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

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

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

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

  886421 temps d'étude

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

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

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

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

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

  23797 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

• [Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG)
• [Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)
• [image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)
• [Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG)
• [Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)
• [Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes
• [image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)
• [Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (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