仅在选定时更改选定选项的文本
仅在选定时更改选定选项的文本
提问于 2013-09-11 04:52:57
我有一个选择框，允许用户为一件衣服选择一个类别。类别可以有子类别，因此为了显示该层次结构，我编写了如下选项：
Category Name
├─ Sub-category name它看起来像这样：
类别名称
*├─子类别名称
不幸的是，当用户选择子类别时，选择框中显示的文本将包含结构字符。如何在选择某个选项时仅显示类别名称，而在更改选项时保留HTML结构？有没有更好的方法来显示选项中类别的层次结构？Optgroup不适合我，因为用户还需要能够选择顶级类别。
下面是它现在的样子。
回答 2
Stack Overflow用户
发布于 2013-09-11 05:24:04
也许你是在找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>Stack Overflow用户
发布于 2013-09-11 08:03:55
我已经想出了一个简单的解决方案，但不能在上面做更多的工作。希望它能对你有所帮助。
HTML
<select id="Categories">
<option value="Shoes">Shoes</option>
<option value="Sneakers"> ├─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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18732924
复制相关文章
相似问题
腾讯云开发者
