hide the text inside select control

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>

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.



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


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>


    <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>
<div class='output'></div>


       $('.output').html($('select option:selected').val()+'<br/>'+ 
        $('select option:selected').data('meta')); 


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


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.

    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

Then I modified AbstractChosen.prototype.winnow_results method:


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


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


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.