Maison >interface Web >tutoriel HTML >Correction d'un bug pour la balise optGroup dans la liste déroulante HTML
Correction d'un bug pour la balise optGroup dans la liste déroulante HTML
- 黄舟original
- 2017-07-03 09:57:542425parcourir
Lorsque le premier élément de la liste déroulante est optGroup, lorsque vous utilisez la molette de la souris pour modifier l'option, si vous faites défiler rapidement vers le haut, le premier élément optGroup sera sélectionné. Ce n'est pas le résultat que nous souhaitons. , et si vous utilisez du code pour obtenir la valeur de la liste déroulante, une erreur se produira.
Une fois optGroup sélectionné, la valeur de selectIndex est toujours 0 après que la liste déroulante perd le focus (quand il y a des options dans la liste déroulante). La valeur de selectIndex n'est vraie que lorsque la liste déroulante est sélectionnée. down box retrouve le focus et perd le focus devient -1, donc simplement juger le selectIndex dans onblur ne fonctionnera pas, nous devons donc effectuer un processus intermédiaire, puis juger le selectIndex si l'optGroup est sélectionné. , définissez le selectIndex sur 0.
Lorsque la liste déroulante ne contient que optGroup, aucun élément n'est sélectionné par défaut, c'est-à-dire un élément vide. Le selectIndex d'un élément vide est également -1, donc dans. dans ce cas, vous ne pouvez pas définir directement le selectIndex sur 0 (car il n'y a pas d'élément d'option), je ne peux pas le définir sur -1, cela n'aura aucun effet. Nous devons d'abord ajouter une option à la liste déroulante, définissez le selectIndex sur 0, puis définissez le selectIndex sur -1, puis définissez l'option nouvellement ajoutée Supprimer , car en principe optGroup ne peut pas être sélectionné, donc lorsque selectIndex est défini sur -1, un élément vide sera être sélectionné.
Le code spécifique est le suivant :
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<SELECT id="sel" onblur="ValidateElement(this);">
<optgroup label='1111'>
</optgroup>
</SELECT>
<SELECT id="sel1" onblur="ValidateElement(this);">
<optgroup label='1111'>
<option >12</option >
<option >23</option >
<option >34</option >
</optgroup>
<option >aa</option >
<option >bb</option >
<option >cc</option >
</SELECT>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function ValidateElement(obj)
{
var t = obj.selectedIndex;
obj.selectedIndex = -1;
obj.selectedIndex = t;
if(obj.selectedIndex == -1)
{
if(obj.options.length > 0)
{
obj.selectedIndex = -1;
obj.selectedIndex = 0;
}
else
{
opt = document.createElement("option");
opt.innerText = "";
obj.insertAdjacentElement("beforeEnd",opt);
obj.selectedIndex = 0;
obj.selectedIndex = -1;
try
{
obj.options[0] = null;
}
catch(e){}
}
}
}
//-->
</SCRIPT>
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!