Question

如何隐藏option内写的文字部分？

我尝试了以下内容：

<select name='what'>
   <option value='some value'>Value to be shown <span class='hide'>value to be hidden</span></option>
   ....
</select>

这是CSS。

.hide{ visibility : hidden; }

但它似乎不起作用。我也尝试了display:none而不是visibility:hidden，但这也不起作用。

P.S：我为什么要这样做？我想这样做是因为我希望隐藏文本包含在搜索中。

更新我很清楚它可能是使用html5元标记实现的，但不幸的是我不能在这里使用，因为我使用的是名为Chosen的Jquery插件而且它没有不支持搜索元标记。

Answer 1

为了向您的选项添加额外数据，例如对于搜索，您可以使用option元素的值或额外属性。例如，

<option value="value to be hidden" data-meta="value to be hidden">Value to be shown</option>

<强> HTML

<select>
    <option value="value to be hidden1" data-meta="value to be hidden11">Value to be shown1</option>
    <option value="value to be hidden2" data-meta="value to be hidden22">Value to be shown2</option>
    <option value="value to be hidden3" data-meta="value to be hidden33">Value to be shown3</option>
</select>
<div class='output'></div>

<强> JS

$(document).ready(function(){
    $('select').change(function(){
       $('.output').html($('select option:selected').val()+'<br/>'+ 
        $('select option:selected').data('meta')); 
    });
});

http://jsfiddle.net/uHY5P/

您可以使用前缀“data-”引入任意数量的属性，并通过调用jQuery.data('yourCustomAttr')

来检索它们

Answer 2

你不能这样做。 <option>标记不能包含任何其他标记。使用Select2

Answer 3

自从你发布了你的问题已经有一段时间了，但它可能在将来帮助某人。在过去的几天里，我完成了相同的过程。

我需要使用jquery Chosen插件（版本1.1.0）搜索带或不带特殊字符的选择选项。

我与葡萄酒生产商合作，其中包括ChâteauBénitey等外国人的名字。在这种情况下，自由文本搜索应该找到生产者“châteaubénitey”和“chateau benitey”关键字。

这就是我实现它的方式：

我使用PHP将特殊字符动态转换为等效字符，例如。 “â”=＆gt; “一”。

我在名为<option>的html中的data-search-text="Château Bénitey Chateau Benitey"标签中创建了一个额外的属性。

然后我修补了Chosen插件以读取data-search-text值而不是选项文本。

在SelectParser.prototype.add_option方法中，我添加了一个新属性来存储属性值。

this.parsed.push({
    array_index: this.parsed.length,
    options_index: this.options_index,
    value: option.value,
    text: option.text,
    html: option.innerHTML,
    selected: option.selected,
    disabled: group_disabled === true ? group_disabled : option.disabled,
    group_array_index: group_position,
    classes: option.className,
    style: option.style.cssText, // extra comma ;)
    searchTextAttribute: option.getAttribute('data-search-text') // this is the line I added
});

然后我修改了AbstractChosen.prototype.winnow_results方法：

替换：

option.search_match = this.search_string_match（option.search_text，正则表达式）;

使用：

var textToSearch =  option.search_text;
if (option.searchTextAttribute) {
    textToSearch = option.searchTextAttribute;
}

option.search_match = this.search_string_match(textToSearch, regex);

我的高级搜索中有多个下拉列表，因此只有填充了data-search-text属性的选项才会表现出来。

我还必须删除突出显示选项文字的匹配部分的功能。

if (searchText.length) {
    startpos = option.search_text.search(zregex);
    text = option.search_text.substr(0, startpos + searchText.length) + '</em>' + option.search_text.substr(startpos + searchText.length);
    option.search_text = text.substr(0, startpos) + '<em>' + text.substr(startpos);
}

确保使用以下设置初始化Chosen插件，否则它将仅从搜索开头搜索，并且转换的文本将不匹配。

$（'。your-select'）。selected（{search_contains：true}）;

隐藏选择控件内的文本

3 个答案: