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

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，然后单击on 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

享受欢呼