Cet article concerne principalement les méthodes les plus élémentaires liées à javascript et à la sélection, pour référence par les personnes qui ne sont pas familières avec javascript. Une situation courante est que la personne qui propose la structure du formulaire doit non seulement concevoir la logique du programme et créer des structures de données, mais doit également concevoir le style du formulaire et être familiarisée avec Javascript. Certaines entreprises peuvent exiger que vous maîtrisiez bien ; dans Photoshop : au début, nous sommes tous polyvalents.
Ce qui suit est la base de notre exemple ; il ne s’agit pas d’un formulaire standard.
<formulaire id="f">
<select size="1" name="s">
<option value="VeVB.COm">Wulin.com</option>
<option value="baidu.com">Baidu</option>
</sélectionner>
</form>
-------------------------------------------------- --------------------------
Copiez le code comme suit :
<script type="text/javascript">
<!--
var f = document.getElementById("f");
//Obtenir le nombre d'éléments de la liste sélectionnée
document.write(fsoptions.length);
document.write(fslength);
//L'indice de l'élément actuellement sélectionné (à partir de 0) (il existe deux méthodes)
//Si plusieurs éléments sont sélectionnés, renvoie l'indice du premier élément sélectionné
document.write(fsoptions.selectedIndex);
document.write(fsselectedIndex);
//Vérifie si un élément est sélectionné
document.write(fsoptions[0].selected);
//Obtenir la valeur et le texte d'un certain élément
document.write(fsoptions[0].value);
document.write(fsoptions[1].text);
//Supprimer un élément
fsoptions[1] = nul ;
//Ajouter un élément
fsoptions[fsoptions.length] = new Option("Texte supplémentaire", "Valeur supplémentaire");
//Modifier un élément
fsoptions[1] = new Option("texte modifié", "valeur modifiée");
//Vous pouvez également définir directement le texte et la valeur de l'élément
//-->
</script>
//Sélectionne tous les éléments de la liste
fonction SelectAllOption (liste)
{
pour (var i=0; i<list.options.length; i++)
{
list.options[i].selected = true;
}
}
// Inverser la sélection des éléments dans la liste par le réseau d'apprentissage asp VeVB.COm
fonctionDeSelectOptions (liste)
{
pour (var i=0; i<list.options.length; i++)
{
list.options[i].selected = !list.options[i].selected;
}
}
//Renvoie le nombre d'éléments sélectionnés dans la liste
fonction GetSelectedOptionsCnt (liste)
{
var cnt = 0 ;
var je = 0;
pour (i=0; i<list.options.length; i++)
{
si (list.options[i].selected)
{
cnt++;
}
}
retour cnt;
}
//Effacer la liste
fonction ClearList(liste)
{
tandis que (list.options.length > 0)
{
liste.options[0] = null ;
}
}
//Supprime l'élément sélectionné de la liste
//Renvoie le nombre d'éléments supprimés
fonction DelSelectedOptions (liste)
{
var je = 0;
var suppriméCnt = 0;
tandis que (i < list.options.length)
{
si (list.options[i].selected)
{
liste.options[i] = null ;
suppriméCnt++;
}
autre
{
je++;
}
}
renvoyer deleteCnt ;
}
//Cette fonction recherche si l'élément correspondant existe
//repeatCheck s'il faut effectuer une vérification de répétabilité
// S'il s'agit de "v", effectuez une vérification des valeurs en double par valeur
// S'il s'agit de "t", effectuez une vérification des valeurs en double basée sur le texte
// S'il s'agit de "vt", effectuez une vérification des valeurs en double par valeur et texte
//Autres valeurs, pas de contrôle de répétabilité, renvoie false
fonction OptionExists (liste, optText, optValue, repeatCheck)
{
var je = 0;
var trouver = faux;
si (repeatCheck == "v")
{
// Vérification des valeurs en double par valeur
pour (i=0; i<list.options.length; i++)
{
si (list.options[i].value == optValue)
{
trouver = vrai ;
casser;
}
}
}
sinon si (repeatCheck == "t")
{
// Répéter la vérification par texte
pour (i=0; i<list.options.length; i++)
{
si (list.options[i].text == optText)
{
trouver = vrai ;
casser;
}
}
}
sinon si (repeatCheck == "vt")
{
//Vérification en double par valeur et texte
pour (i=0; i<list.options.length; i++)
{
if ((list.options[i].value == optValue) && (list.options[i].text == optText))
{
trouver = vrai ;
casser;
}
}
}
retourner trouver;
}
//Ajouter un élément à la liste
//list est la liste à ajouter
//optText et optValue représentent respectivement le texte et la valeur de l'élément
//repeatCheck s'il faut effectuer une vérification de répétabilité, voir OptionExists
//Renvoie vrai si l'ajout a réussi, faux en cas d'échec
fonction AppendOption (liste, optText, optValue, repeatCheck)
{
if (!OptionExists(list, optText, optValue, repeatCheck))
{
list.options[list.options.length] = new Option(optText, optValue);
renvoie vrai ;
}
autre
{
renvoie faux ;
}
}
//insérer un élément
//position d'insertion d'index, lorsque la position d'insertion >= le nombre d'éléments existants dans la liste, sa fonction équivaut à ajouter des éléments sans vérification répétée
//optText et optValue représentent respectivement le texte et la valeur de l'élément
fonction InsertOption (liste, index, optText, optValue)
{
var je = 0;
pour (i=list.options.length; i>index; i--)
{
list.options[i] = new Option(list.options[i-1].text, list.options[i-1].value);
}
list.options[index] = nouvelle Option(optText, optValue);
}
//Exporter des éléments d'une liste vers une autre liste
//repeatCheck s'il faut effectuer une vérification de répétabilité, voir OptionExists
//Une fois les éléments deleteSource importés dans la cible, s'il faut supprimer les éléments de la liste source
//Renvoie le nombre d'éléments concernés
fonction ListToList (sList, dList, repeatCheck, deleteSource)
{
//Le nombre de lignes affectées
var lignes = 0 ;
var je = 0;
tandis que (i<sList.options.length)
{
if (sList.options[i].selected && AppendOption(dList, sList.options[i].text, sList.options[i].value, repeatCheck))
{
//Ajouté avec succès
lignes++;
si (supprimerSource)
{
//Supprimer les éléments de la liste source
sListe.options[i] = null ;
}
autre
{
je++;
}
}
autre
{
je++;
}
}
lignes de retour ;
}
// Déplace l'élément sélectionné vers le haut de la liste
fonction MoveSelectedOptionsUp (liste)
{
var je = 0;
valeur var = "";
var texte = "";
pour (i=0; i<(list.options.length-1); i++)
{
si (!list.options[i].selected && list.options[i+1].selected)
{
valeur = list.options[i].value;
texte = liste.options[i].text;
list.options[i] = new Option(list.options[i+1].text, list.options[i+1].value);
list.options[i].selected = true;
list.options[i+1] = new Option(texte, valeur);
}
}
}
// Déplace l'élément sélectionné vers le bas de la liste
fonction MoveSelectedOptionsDown (liste)
{
var je = 0;
valeur var = "";
var texte = "";
pour (i=list.options.length-1; i>0; i--)
{
//www.VeVB.COm
si (!list.options[i].selected && list.options[i-1].selected)
{
valeur = list.options[i].value;
texte = liste.options[i].text;
list.options[i] = new Option(list.options[i-1].text, list.options[i-1].value);
list.options[i].selected = true;
list.options[i-1] = new Option(texte, valeur);
}
}
}