Question

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

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

Thanks

Answer 1

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.