How can I hide the part of the text written inside of the option?

I've tried the following:

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

And here is the CSS.

.hide{ visibility : hidden; }

But it doesn't seem to work. I've also tried display:none instead of visibility:hidden but that doesn't work either.

P.S: Why I want to do this? I want to do this because I want the hidden text to be included in the search.

UPDATE I am well aware that it may be achieved using the html5 meta tags, but unfortunately that I can't use here as I am using Jquery plugin called Chosen and it doesn't support the search over meta tags.

How can I hide the part of the text written inside of the option?

I've tried the following:

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

And here is the CSS.

.hide{ visibility : hidden; }

But it doesn't seem to work. I've also tried display:none instead of visibility:hidden but that doesn't work either.

P.S: Why I want to do this? I want to do this because I want the hidden text to be included in the search.

UPDATE I am well aware that it may be achieved using the html5 meta tags, but unfortunately that I can't use here as I am using Jquery plugin called Chosen and it doesn't support the search over meta tags.

• javascript
• html
• css

• is the "value to be hidden" part the value of the option which you want to store and the "Value to be shown" the text of the option which you want to be visible? – melc Commented Oct 19, 2013 at 11:18
• @melc Sorry, I couldn't understand your ment? – Kamran Ahmed Commented Oct 19, 2013 at 11:20
• 1 You can't use html inside <option> developer.mozilla/en-US/docs/Web/HTML/Element/option "Permitted content Text with eventually escaped characters (like é)." – Yury Tarabanko Commented Oct 19, 2013 at 11:20
• Answer to his question is yes – Deryck Commented Oct 19, 2013 at 11:20
• of you use firebag, you'll see that the span tags are not supported inside option tag. You need to use something else to to that. Like storing that value in the name or other attribute of option tag. And if you want to show that value sometime you just use javascript to add the value from name to the html content of the option. Hope this help you! – Georgian Burungiu Commented Oct 19, 2013 at 11:21

3 Answers 3

In order to add extra data to your option, e.g. for search, you may use the value or extra attributes of the option element. For example,

<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/uHY5P/

You may introduce as many attributes as you want with the prefix "data-" and retrieve them by calling jQuery.data('yourCustomAttr')

You can't do this. <option> tag cannot contain any other tags. Use Select2

It's been a while since you posted your question but it may help someone in the future. I went through exactly the same process in the past few days.

I needed to search for select options with or without special characters using jquery Chosen plugin (ver. 1.1.0).

I have a drop down with wine producers which includes names with foreign characters like Château Bénitey. In this case free text search should find the producer with "château bénitey" and "chateau benitey" keywords.

This is how I achieved it:

I used PHP to dynamically convert special characters to their equivalents eg. "â" => "a".

I created an extra attribute in <option> tags in html called data-search-text="Château Bénitey Chateau Benitey".

Then I patched Chosen plugin to read the data-search-text value instead of option text.

In SelectParser.prototype.add_option method I added a new property to store attribute values.

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 ma ;)
    searchTextAttribute: option.getAttribute('data-search-text') // this is the line I added
});

Then I modified AbstractChosen.prototype.winnow_results method:

Replace:

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

With:

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

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

I have multiple dropdowns in my advanced search so only the selects that have data-search-text attribute populated will behave that way.

I also had to remove the feature that highlights matched parts of option text as it was breaking it.

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);
}

Make sure you initialise the Chosen plugin with the following setting, otherwise it will search from the beginning of search only and the converted text won't be matched.

$('.your-select').chosen({search_contains: true});