HTML 드롭다운 상자의 optGroup 태그에 대한 버그 수정-HTML 튜토리얼-php.cn

HTML 드롭다운 상자의 optGroup 태그에 대한 버그 수정

黄舟

풀어 주다： 2017-07-03 09:57:54

원래의

2425명이 탐색했습니다.

드롭다운 상자의 첫 번째 항목이 optGroup일 때 마우스 휠을 사용하여 옵션을 변경할 때 빠르게 위로 스크롤하면 첫 번째 항목 optGroup이 선택됩니다. 이는 우리가 원하는 결과가 아니며, 그렇게 할 수 있습니다. 코드로 가져오세요. 드롭다운 상자의 값이 이면 오류가 발생합니다.

optGroup을 선택한 후 드롭다운 상자가 포커스를 잃은 후에도 selectIndex의 값은 여전히 0입니다(드롭다운 상자에 옵션이 있는 경우). 드롭다운 상자가 다시 포커스를 얻고 포커스를 잃은 경우에만 selectIndex 값은 실제로 - 1이 됩니다. 따라서 onblur에서 단순히 selectIndex를 판단하는 것은 불가능하므로 중간 과정을 거쳐 selectIndex를 판단해야 합니다. optGroup이 선택되면 selectIndex를 0으로 설정합니다.

드롭다운 상자에 optGroup만 있는 경우 기본값은 다음과 같습니다. 어떤 항목을 선택해도 빈 항목이 됩니다. 따라서 이 경우 selectIndex를 설정할 수 없습니다. (옵션 항목이 없기 때문에) -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 중국어 웹사이트의 기타 관련 기사를 참조하세요!