在选项中删除和添加缩进选项

Question

目前，我正在为元素中的标记设置缩进以创建层次结构。

<select>
    <option> Option 1 </option>
    <option> &nbsp;&nbsp;Option 2 </option>
    <option> &nbsp;&nbsp;Option 3 </option>
    <option> Option 4</option>
<select/>

然而，当选择选项2时，与选项1相比，它前面有一个尴尬的空间。当我深入到层次结构中时，这个空间变得更加明显。

vs

我已经有办法在显示选项时删除空格，但我需要能够在再次显示选择下拉列表时将其添加回来。

编辑：我玩过optgroup，但总有一个空白标签有额外空间的问题。

Answer 1

尝试使用＆emsp代替不间断空格。这样，所选选项将不会在左侧显示空格。不过，这在某些较旧的浏览器上不兼容。

Answer 2

好吧，一种删除onchange select的方法，然后onclick select再次在您的选项上添加想要在其中添加额外空间的方法。但这将很难解决。

其他要使用的技巧。

<select>
    <option> Option 1 </option>
    <option> &emsp;Option 2 </option>
    <option> &emsp;Option 3 </option>
    <option> Option 4</option>
<select/>

看看为您创建的Codepen： https://codepen.io/anon/pen/wZXoBK

享受欢呼声