选择HTML

Question

我目前正在开发一个网站，但遇到了问题。 我想列出一个具有多个级别的列表（分层），但显然它不存在（如果可以，请告诉我）。 因此，我为自己创建了一个包含不可见字符的系统，问题是一旦选中该选项卡，这些选项卡就会保留下来，从而无法正确看到所写内容。你有解决办法吗？

提前谢谢！

问题：enter image description here

打开时的列表：enter image description here

代码：

<select name="selectEmp" id="selectEmp" class="form-control selectEmp">
            <option value=""></option>
            <option value="00.00.00" disabled="disabled">00.00.00 - Total</option>
            <option value="10.00.00" disabled="disabled">10.00.00 - Bâtiment 1</option>
            <option value="10.10.00" disabled="disabled">&nbsp;&nbsp;&nbsp;&nbsp;10.10.00 - Cave</option>
            <option selected="selected" value="10.10.10">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10.10.10 - Test</option>
            <option value="10.20.00" disabled="disabled">&nbsp;&nbsp;&nbsp;&nbsp;10.20.00 - Niveau 1</option>
            <option value="10.30.00" disabled="disabled">&nbsp;&nbsp;&nbsp;&nbsp;10.30.00 - Niveau 2</option>
            <option value="20.00.00" disabled="disabled">20.00.00 - Bâtiment 2</option>
            <option value="20.10.00" disabled="disabled">&nbsp;&nbsp;&nbsp;&nbsp;20.10.00 - Cave</option>
            <option value="20.20.00" disabled="disabled">&nbsp;&nbsp;&nbsp;&nbsp;20.20.00 - Niveau 1</option>
        </select>

Answer 1

我们可以使用optgroup。参见下面的代码。希望这会有所帮助。

<select name="selectEmp" id="selectEmp">
      <option value="00.00.00 - Total"></option>
      <optgroup value="10.00.00" label="10.00.00 - Bâtiment 1">
            <option value="1">10.10.00 - Cave</option>
            <option value="2">10.10.10 - Test</option>
            <optgroup value="10.00.00" label="10.10.10 - Test">
                  <option value="2">10.20.00 - Niveau 1</option>
            </optgroup>
            <option value="2">10.30.00 - Niveau 2</option>
      </optgroup>
      <optgroup value="10.00.00" label="20.00.00 - Bâtiment 2">
            <option value="1">20.10.00 - Cave</option>
            <option value="2">20.20.00 - Niveau 1</option>
      </optgroup>
</select>