显示选择元素的选定值，使其与显示为选项的方式不同

Question

我有一个select元素，其选项的值传达层次结构。例如

<select>
  <option value="1">Tier 1</option>
  <option value="1a">  Tier 1a</option>
  <option value="2">Tier 2</option>
  <option value="2a">  Tier 2a</option>
  <option value="2b">  Tier 2b</option>
  <option value="2b">  Tier 2c</option>
</select>

FWIW，我正在使用像这样的ReactJS来实现这一点，其中unicode字符160是nbsp;：

renderTierOption(item, level) {
  return (
    <>
      <option key={item.tier} value={item.tier}>
        {times(2 * level, () => String.fromCharCode(160)).map(x => x)}
        {`Tier ${item.tier}`}
      </option>
      {item.tiers.map(child => this.renderTierOption(child, level + 1))}
    </>
  );
}

像这样填充显示会导致模糊select元素中的选定值也具有填充。例如

我希望在这种情况下没有填充。

有没有办法不显示模糊select值的填充，但是在实际选项显示值中保留填充？

Answer 1

对于您的情况，select中的层次结构更适合本地HTML's <optgroup>：

<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup> 
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>

并且可能是没有格式化技巧的最佳解决方案。

在坚持使用 解决方案的同时，可以将所选元素动态对齐：

select {
  text-indent: <minus ident in px>;
}

这将移动<select>元素中的所选项目看起来没有同一性，但每次选择时都需要重新计算，并在一个像素的宽度上做出一些假设。 （select option padding）

select {
  text-indent: -5px;
}

<select>
  <option value="1">Tier 1</option>
  <option value="1a">&nbsp;&nbsp;Tier 1a</option>
  <option value="2">Tier 2</option>
  <option value="2a">&nbsp;&nbsp;Tier 2a</option>
  <option value="2b">&nbsp;&nbsp;Tier 2b</option>
  <option value="2b">&nbsp;&nbsp;Tier 2c</option>
</select>