How to define a span tag in a dropdown list option

Question

I use HAML to create a drop-down list as shown below:

%select.categories %option{:category => 'question'} Top Questions in %span#topic-name %option{:category => 'muse'} Top Muses in %span#topic-name %option{:category => 'user'} Top Users in %span#topic-name .clear 

My intention is to add the topic name to the span 'name-name' identifier. However, when I try to find a range using jQuery $ ('# topic-name'), an empty array is returned.

I checked the generated HTML and I could not identify the span tags

Can someone advise me how I can create a span to add a topic name?

thanks

Answer 1

As @Rory McCrossan said, you cannot have span inside option . This is invalid HTML.

However, you can find the option you want to change and use the jQuery .append() function to insert new text.

For instance:

 %select.categories %option{:id =>'optQuestion', :category => 'question'} Top Questions in 

JQuery to add text will

 $('optQuestion').append("some text"); // where "some text" is what you want to insert 

If you have multiple copies of the same select and want to update them with the same "some text", you can use the class instead of the identifier for your targeting.

Answer 2

HTML cannot be inserted inside option elements - only text. What you ask for cannot be achieved.

Alternatively, you can add a topic name as the data-x parameter, although this will only be valid in HTML5. I don't know how to do this in HAML, but the HTML would look like this:

 <select> <option data-topicname="ABC">Top Questions in</option> </select> 

Answer 3

The only way to do this is to use a plugin that mimics the behavior of combobox. I don’t know about jQuery, but ExtJS components have such features, but they are not provided with standard HTML and CSS, as Rory mentioned.

This could be a good starting point:

http://www.designdim.com/2011/07/10-important-jquery-selectboxdropdown-plugins/

Answer 4

you are using optgroup html tag

see document here

http://www.w3schools.com/tags/att_optgroup_label.asp

Answer 5

It looks like a good candidate for optgroup , which allows you to select the immutable option "header" and group its nested parameters together.