ホームページ > 記事 > ウェブフロントエンド > HTML ドロップダウン ボックスの optGroup タグのバグ修正
HTML ドロップダウン ボックスの optGroup タグのバグ修正
- 黄舟オリジナル
- 2017-07-03 09:57:542377ブラウズ
ドロップダウン ボックスの最初の項目が optGroup である場合、マウス ホイールを使用してオプションを変更するときに、素早く上にスクロールすると、最初の項目 optGroup が選択されます。これは私たちが望む結果ではありませんが、これは可能です。コードで取得します。ドロップダウンボックスの値が の場合、エラーが発生します。
optGroup が選択された後、ドロップダウン ボックスがフォーカスを失った後も、selectIndex の値は 0 のままです (ドロップダウン ボックスにオプションがある場合)。ドロップダウン ボックスが再びフォーカスを取得してフォーカスを失った場合にのみ、 selectIndex の値は実際には - 1 になります。そのため、onblur で selectIndex を単純に判定することはできないため、中間処理を行ってから selectIndex を判定する必要があります。optGroup が選択されている場合は、selectIndex を 0 に設定します。
ドロップダウンボックスにoptGroupのみがある場合、デフォルトはありません。項目が選択されている場合、それは空の項目です。そのため、この場合、selectIndexを設定することはできません。直接 0 (オプション項目がないため) を -1 に設定することはできません。そうでない場合は、実際には、最初にドロップダウン ボックスにオプションを追加し、selectIndex を 0 に設定し、次に selectIndex を - に設定する必要があります。 1にして、新しく追加したオプションを削除します。原則としてoptGroupは選択できないため、selectIndexが-1に設定されている場合、空の項目が選択されます。
具体的なコードは次のとおりです:
<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>以上がHTML ドロップダウン ボックスの optGroup タグのバグ修正の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。