0

我有一个选择框，允许用户为一件衣服选择一个类别。类别可以有子类别，因此为了显示该层次结构，我编写如下选项：

Category Name
  ├─ Sub-category name

看起来像这样：

分类名称

  ├─ 子类名

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

这是它现在的样子。

http://jsfiddle.net/K6yfp/

4

2 回答 2

0

我想出了一个简单的解决方案，但无法对其进行更多锻炼。希望你会发现它有帮助。

HTML

<select id="Categories">
    <option value="Shoes">Shoes</option>
    <option value="Sneakers">&nbsp;&nbsp;&#x251c;&#x2500;Sneakers</option>
</select>

JS

$(document).ready(function(){
    var SelectedCategory = $('#Categories').find('option:selected').val();
    $('#Categories').bind("change",function() {
        $(this).find('option:selected').attr('label',$(this).find('option:selected').val());
        SelectedCategory = $(this).find('option:selected').val();
        $(this).blur();
    });

    $('#Categories').focus(function(e){
        e.stopPropagation();
        $(this).find('option:selected').removeAttr('label');
    }).blur(function(e){
        e.stopPropagation();
        $(this).find('option:selected').attr('label',$(this).find('option:selected').val());
    });
});

注意：不要忘记包含jQuery库。

检查演示小提琴。

于 2013-09-11T08:03:55.190 回答
0

也许你正在寻找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>

小提琴

于 2013-09-11T05:24:04.257 回答