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

无法直接解决，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: 使用框架

比如：

Select2
Chosen
jQuery UI SelectMenu

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

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

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

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