Maison >interface Web >tutoriel HTML >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
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
- WBOYoriginal
- 2016-05-16 16:37:422330parcourir
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
Copier le code
Le code est le suivant : peut être omise et utilisée dans la page
Copiez le code
Le code est le suivant :
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.
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
@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
@param objSelectId L'identifiant du composant de sélection cible à effacer
Copiez le code
function getAllItemValuesByString(objSelectId) {
Copiez le code
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;i
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');
}
}
}
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
@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 :
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
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof); (objSelect) != "indéfini") {
for(var i=0;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 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
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
@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;
}
}
}
}
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;
}
}
}
@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;i
objSelect.options.remove(i);
i = i - 1;
}
}
}
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