CODEWITHSUNDEEP
javascriptjqueryhtml
Zhen
Zhen

Reputation: 12431

How to define span tag within an option of a drop down list

I am using 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 id 'topic-name'. However when I try to find the span using jQuery $('#topic-name'), an empty array was returned.

I checked the generated HTML and I was not able to see the span tags defined

enter image description here

Can anyone advise me on how I can create a span with the purpose of adding a 'topic name'

Thanks

Upvotes: 4

Views: 6594

Answers (5)

Rob Allen
Rob Allen

Reputation: 17719

As @Rory McCrossan said, you cannot have a span inside of an option. It is invalid HTML.

You can however find the Option you want to modify and use JQuery's .append() function to insert the new text.

For example: 

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

The JQuery to add text would be

$('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 all with the same "some text" you can use a class instead of an ID for your targeting.

Upvotes: 1

Alex K.
Alex K.

Reputation: 175826

That looks like a good candidate for an optgroup which allows for a non-selectable "header" option and groups its enclosed options together.

Upvotes: 1

Irishka
Irishka

Reputation: 1136

you ca use optgroup html tag

see docu here

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

Upvotes: 1

Mike Thomsen
Mike Thomsen

Reputation: 37506

The only way to do this is to use a plugin which simulates combobox behavior. I don't know about for jQuery, but ExtJS components have capabilities like that--but they're not provided by standard HTML and CSS as Rory mentioned.

This might be a good starting point:

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

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337590

HTML cannot be inserted inside option elements - only text. What you are asking cannot be achieved.

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

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

Upvotes: 2

Related Questions