首頁 > web前端 > html教學 > 關於html下拉框中optGroup標籤的一個bug修復

關於html下拉框中optGroup標籤的一個bug修復

黄舟
發布: 2017-07-03 09:57:54
原創
2423 人瀏覽過


當下拉框中的第一項是optGroup時,在用滑鼠滾輪改變選項時,如果快速的向上滾動則會把第一項的optGroup選中,這不是我們想要的結果,而且再用程式碼取得下拉框的值是就會發生錯誤。

勾選optGroup後,下拉框失去焦點後selectIndex的值在此時還是0(當下拉框中有可選項時).只有在下拉框再次獲得焦點並失去焦點時selectIndex的值才真正的變成-1,所以簡單的在onblur判斷selectIndex是不行的,所以我們需要作一個中間的處理,然後判斷selectIndex,如果選取的optGroup則把selectIndex置為0.

當下拉框只有optGroup時預設是不選取任何項的,也就是空項,空項的selectIndex的也是-1,所以在這種情況下不能直接把selectIndex置為0(因為沒有option項) ,我不能設定為-1,那樣是沒有任何效果的,我們需要先向下拉框中加入一個option,把selectIndex設為0,然後再把selectIndex設為-1,再把新加的option刪除,因為原則上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標籤的一個bug修復的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板