码迷,mamicode.com
首页 > Web开发 > 详细

如何让HTML中<select>的<optgroup>可选?

时间:2019-09-28 20:03:41      阅读:406      评论:0      收藏:0      [点我收藏+]

标签:支持   chosen   pre   pad   无法   option   ali   bsp   未能   

无法直接解决,optgroup天生是不可选的。

 

方法1(不推荐): 用<option>代替<optgroup>,用样式使其看起来与option相似

<select multiple="multiple">
    <option value="0" class="optionGroup">Parent Tag</option>
    <option value="1" class="optionChild">Child Tag</option>
    <option value="2" class="optionChild">Child Tag</option>
</select>
.optionGroup {
    font-weight: bold;
    font-style: italic;
}
    
.optionChild {
    padding-left: 15px;
}

经测试,Firefox69可用,Chrome77无效果。

原因是对<option>加样式在各引擎中支持程度不一。

 

方法2: 用<option>代替<optgroup>,用&nbsp使option缩进。

<select>
    <option value="0" class="optionGroup">Parent Tag</option>
    <option value="1">&nbsp;&nbsp;&nbsp;Child Tag1</option>
    <option value="2">&nbsp;&nbsp;&nbsp;Child Tag2</option>
</select>

原理同1,但没有用css缩进,所以不会有浏览器兼容问题。

 

方法3: 使用框架

比如:

 

方法4:optgroup不可选,但在该group下增加【全部】选项,如果需要选择该optgroup,选择全部即可

虽然未能达到optgroup可选的效果,但优点如下:

  1. 无需外部css
  2. 避免用户误以为optgroup不可选,更清晰的体现optgroup是可选的。个人理解,这也是html规范有意不让optgroup可选的原因吧。

参考资料:https://stackoverflow.com/questions/9892247/selectable-optgroup-in-html-select-tag

如何让HTML中<select>的<optgroup>可选?

标签:支持   chosen   pre   pad   无法   option   ali   bsp   未能   

原文地址:https://www.cnblogs.com/zzzeto/p/11604337.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!