1

我怎样才能隐藏写在里面的文字部分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但那也不起作用。

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

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

4

3 回答 3

4

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

<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')

于 2013-10-19T11:21:00.473 回答
0

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

于 2013-10-19T11:20:48.453 回答
0

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

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

我有一个葡萄酒生产商的下拉列表，其中包括带有外国字符的名字，比如 Château Bénitey。在这种情况下，自由文本搜索应该找到具有“château bénitey”和“château benitey”关键字的生产者。

这就是我实现它的方式：

我使用 PHP 将特殊字符动态转换为它们的等价物，例如。“一” => “一”。

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

然后我修补了选择插件来读取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').chosen({search_contains: true});

于 2014-07-01T09:37:14.953 回答