Question

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

Category Name
&nbsp;&nbsp;&#x251c;&#x2500; 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

Answer 2

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

<强> 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 库。

检查Demo Fiddle。

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

2 个答案: