javascript - 仅在选中时更改所选选项的文本

Question

我有一个选择框，允许用户为一件衣服选择一个类别。类别可以有子类别，所以为了显示该层次结构，我这样写选项:

Category Name
  ├─ Sub-category name

看起来像这样:

类别名称

├─ 子类别名称

不幸的是，当用户选择子类别时，选择框中显示的文本包含结构字符。如何在选择选项时仅显示类别名称，但在更改选项时保留结构 HTML？有没有更好的方法来显示选项中类别的层次结构？ Optgroups 对我不起作用，因为用户还需要能够选择顶级类别。

这是现在的样子。

http://jsfiddle.net/K6yfp/

Answer 1

也许你正在寻找optgroup

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

FIDDLE