Explication détaillée de l'utilisation à sélection unique et à sélection multiple de la balise select dans la production de pages HTML_HTML/Xhtml_Web

L'élément select crée des menus à sélection unique ou à sélection 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 l'attribut name lors de la soumission des données du formulaire

1. Utilisation de base :

Copier le code

Le code est le suivant :

Volvo
Saab option value= "opel">Opel
Audi

peut être omise et utilisée dans la page

Copiez le code

Le code est le suivant : TousCentre d'apprentissage en ligne de l'Université Hubei TV

Centre d'apprentissage en ligne de l'Université normale de Chengdu
Collège professionnel et technique de Wuhan Centre d'apprentissage en ligne


2. L'élément Select peut également être utilisé pour des sélections multiples, voir le code suivant :

Copier le code

Le code est le suivant : //Avec l'attribut multiple, vous pouvez sélectionner plusieurs fois

Lycée

;/option>
Ph.D.< ;/option> Lycée ”2”>Collège
Ph.D.
où l'attribut size est défini. Si size = 3, alors trois éléments de données seront affichés. Notez que les sélections multiples ne sont pas autorisées.

École primaire "1">Lycée
Lycée
Lycée technique ;
Collège
Premier cycle Étudiant diplômé
Ph.D.
Stagiaire postdoctoral < option sélectionnée>Veuillez sélectionner



3. Déterminez l'option de sélection S'il existe un article avec la valeur spécifiée dans





Copier le code


Le code est le suivant :

@param objSelectId L'identifiant du composant de sélection cible à vérifier
@param objItemValue La valeur à vérifier pour l'existence
function isSelectItemExit(objSelectId,objItemValue) {
var objSelect = document.getElementById(objSelectId);
var isExit = false;
if (null != objSelect && typeof(objSelect) != "undefined") {

for(var i=0;iif( objSelect.options[i].value == objItemValue) { isExit = true break; return isExit; }

2. Ajoutez un élément à l'option de sélection





Copiez le code


Le code est le suivant :

@param objSelectId L'identifiant du composant de sélection cible à ajouter à l'élément
@param objItemText Le contenu de l'élément à ajouter
@param objItemValue La valeur de l'élément à ajouter
function addOneItemToSelect(objSelectId ,objItemText,objItemValue) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != "undefined") {
//Détermine si la valeur de l'élément existe déjà dans le select
if(isSelectItemExit(objSelectId,objItemValue)) {
$.messager.alert('Prompt message','L'option avec cette valeur existe déjà !' ,'info');
} else {
var varItem = new Option(objItemText,objItemValue);
objSelect.options.add
}
}
}

3. Supprimez l'élément sélectionné de l'option de sélection, prenant en charge la sélection multiple et la suppression multiple

Copiez le code

Le code est le suivant :

@param objSelectId L'identifiant du composant de sélection cible à supprimer
function removeSelectItemsFromSelect(objSelectId) {
var objSelect = document.getElementById (objSelectId);
var delNum = 0;
if (null != objSelect && typeof(objSelect) != "undefined") {
for(var i=0;iif(objSelect .options[i].selected) {
objSelect.options.remove(i);
delNum = delNum 1; ;
}
}
if (delNum <= 0 ) {
$.messager.alert('Message', 'Veuillez sélectionner l'option que vous souhaitez supprimer !', 'info') ;
} else {
$.messager .alert(les options 'message rapide',''delNum' ont été supprimées avec succès !','info');
}
}
}

4. De sélectionnez Supprimer un élément en fonction de la valeur spécifiée dans l'option

Copiez le code Le code est le suivant :

@param objSelectId L'identifiant du composant de sélection cible à vérifier
@param objItemValue La valeur à vérifier pour l'existence
function removeItemFromSelectByItemValue( objSelectId,objItemValue) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != "undefined") {
//Déterminer s'il existe
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('Message','Supprimé avec succès !','info'); 🎜>} else {
$.messager.alert('Message','Non Il existe des options avec des valeurs spécifiées !','info');
}
}
}


5. Effacez toutes les options dans la sélection

Copier le codeLe code est le suivant :

@param objSelectId L'identifiant du composant de sélection cible à effacer

function clearSelect( objSelectId) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof); (objSelect) != "indéfini") {
for(var i=0;iobjSelect.options.remove(i);
}


6. Récupérez tous les éléments dans la sélection et assemblez toutes les valeurs dans une chaîne, séparées par des virgules

Copiez le code

Le code est le suivant : @param objSelectId target select composant id

@retourne les valeurs de tous les éléments dans la sélection, séparée par des virgules

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;
}


7. Déplacer toutes les options sélectionnées d'une sélection vers une autre sélection

Copiez le code

Le code est le suivant :

@param fromObjSelectId L'identifiant du composant de sélection d'origine de l'élément déplacé
@param toObjectSelectId L'identifiant du composant de sélection cible dans lequel l'élément déplacé entrera
function moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document.getElementById(fromObjSelectId);
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) {
addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i]. valeur)
objSelect.options.remove(i);
i = i - 1;
}
}
}
}

8. Déplacez toutes les options vers une autre sélection

Copiez le codeLe code est le suivant :

@param fromObjSelectId L'identifiant du composant de sélection d'origine de l'élément déplacé
@param toObjectSelectId L'identifiant du composant de sélection cible dans lequel l'élément déplacé entrera
function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document.getElementById (fromObjSelectId);
if (null != objSelect) {
for(var i=0;iaddOneItemToSelect(toObjectSelectId,objSelect.options[ i].text ,objSelect.options[i].value)
objSelect.options.remove(i);
i = i - 1;
}
}
}