首页 / HTML / 关于html下拉框中optGroup标签的一个bug修复

关于html下拉框中optGroup标签的一个bug修复

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了关于html下拉框中optGroup标签的一个bug修复，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1745字，纯文字阅读大概需要3分钟。

内容图文

当下拉框中的第一项是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='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标签的一个bug修复的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的关于html下拉框中optGroup标签的一个bug修复全部内容，希望文章能够帮你解决关于html下拉框中optGroup标签的一个bug修复所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/392730.html

来源：【匿名】