HTML ドロップダウンボックスの optGroup タグのバグ修正-htmlチュートリアル-php.cn

HTML ドロップダウンボックスの optGroup タグのバグ修正

黄舟

リリース： 2017-07-03 09:57:54

オリジナル

2378 人が閲覧しました

ドロップダウンボックスの最初の項目が 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=&#39;1111&#39;>
</optgroup>
</SELECT>

<SELECT id="sel1" onblur="ValidateElement(this);">
<optgroup label=&#39;1111&#39;>
 <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 サイトの他の関連記事を参照してください。