Question

Short version:

After inserting a select element with options into the DOM with an AJAX call the “selected” attribute on my option isn’t recognized by the JavaScript. It’s as if it’s not there even though looking at it in Firebug I can see that it is.

Long version:

I’m using a jQuery plugin that generates a “multi select” (select imitation with checkboxes pretty much) based on an actual html select with options that can have a “selected” attribute. The plugin checks if the selected attribute exists by doing

$(this).attr('selected') == true

and if it exists it sets the corresponding checkbox to checked. This all works when I load the page normally. I also need to reload the data if the user chooses to filter it and here is where the problem is. The new data is fetched via AJAX and the plugin is reapplied to new markup but the “selected” attribute isn’t considered present even though it’s there just like before. Other attributes work fine but “selected” bizarrely enough doesn’t. This is the markup both when it works and when it doesn’t.

<option value="1" selected="selected" warning="true"> text</option>

I’m really scratching my head over this. Anyone got a suggestion?

Answer 1

I figured out what the problem was. We use a js combiner and apparently moving the include call to a different file fixed the problem.