SELECT (multiple) options ignoring selected attribute

[WolfShade]

Hello, all,

I've got CF code that is being used with a SELECT tag (multiple attribute), and it seems as though the SELECT tag is ignoring the selected attribute for the child options.

For example, I have code that will generate the following HTML:

<select name="selectA" id="selectA" multiple>
    <option value="">ALL</option>
    <option value="Option 1" selected="selected">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3" selected="selected">Option 3</option>
</select>

But when the page loads, none of the options are selected.  Any suggestions?  What am I missing, here?

V/r,

^_^

[Carl Von Stetten]

Try changing the select tag to multiple="multiple". If that doesn't work, switch it back and change the options with selected="selected" to just selected.

[WolfShade]

Hi, Carl,

I've tried both in each combination, no changes.

V/r,

^_^

[haxtbh]

Is this code what you are expecting it todo or what is actually output once its done. I.e. is this what shows when you inspect element on the page?

[WolfShade]

Hi, haxtbh,

Yes, if you "View Source" and look at the OPTION tags of the SELECT, there are some that have the 'selected' attribute and some that don't, based upon data from the database.

I've tried <select multiple> and <select multiple="multiple">, I've tried <option selected> and <option selected="selected">, no change.

V/r,

^_^

[haxtbh]

Technically there is nothing wrong with what you have posted so without some more code or a repro case then its hard to know what is causing it.

Which browsers are you using?

[WolfShade]

Yeah, that's what is so frustrating about this.

I've done a lot of looking around and such; HTML validator isn't throwing any errors; I understand that 'selected' and 'multiple' are booleans and don't take values (or, rather, anything between  =" and " is ignored); the View Source code is showing that the selected attribute IS being applied to certain options; a jsfiddle does as expected/desired.

I cannot understand what is preventing this from working on my project.  IE, FF, and Chrome all do the same, so I don't think it's browser related.

V/r,

^_^

[haxtbh · Accepted solution]

There is no javascript / jquery anywhere that interacts with this dropdown?

[WolfShade]

There is, but I don't see how it affects this issue.

Each multiple select has an associated checkbox.  If that checkbox is unchecked on page load, its associated select is disabled.  But the query that provides the data for the selected options also checks the checkbox before the page load (and before its associated select is added), so at page load the select is not disabled.  And it is within a $(document).ready(); so it doesn't activate until after all the checkboxes that should be checked are checked.  (How much wood could a woodchuck chuck, if a woodchuck could chuck wood?)

V/r,

^_^

[Carl Von Stetten]

Not entirely sure I followed all of that, but try to boil this down to the simplest case.  Disable all the jQuery stuff so all you have is whatever is rendered by ColdFusion (unless you are loading all of this stuff via AJAX, in which case we need to see a bunch of code).  What do the selects look like then?

[WolfShade]

Same thing - no select options that were selected on form submit.  All selects have options, none selected in the browser.

<select id="selectA" name="selectA" multiple>
    <option value=""<cfif StructKeyExists(form,'selectA') AND NOT len(trim(form.selectA))> selected</cfif>>ALL</option>
    <option value="Opt1"<cfif StructKeyExists(form,'selectA') AND ListFind(form.selectA,'Opt1')> selected</cfif>>Option 1</option>
    <option value="Opt2"<cfif StructKeyExists(form,'selectA') AND ListFind(form.selectA,'Opt2')> selected</cfif>>Option 2</option>
    <option value="Opt3"<cfif StructKeyExists(form,'selectA') AND ListFind(form.selectA,'Opt3')> selected</cfif>>Option 3</option>
    <option value="Opt4"<cfif StructKeyExists(form,'selectA') AND ListFind(form.selectA,'Opt4')> selected</cfif>>Option 4</option>
    <option value="Opt5"<cfif StructKeyExists(form,'selectA') AND ListFind(form.selectA,'Opt5')> selected</cfif>>Option 5</option>
</select>

The above is how my CF code is written.  A View Source does show that certain options have the selected attribute (as in my first post), but those are not 'selected' in the browser on page load.

V/r,

^_^

[Carl Von Stetten]

OK.  But did you disable all of your jQuery/JavaScript code to see what the raw page looks like with no JavaScript executed?

[WolfShade]

Yes, I had commented out that part of the code with <!--- and ---> so that it would not appear at all in the source.

V/r,

^_^

[haxtbh]

If you just simply put the select on the page without any jquery / coldfusion then does it still not work?

[WolfShade]

SMH.  I need to get more sleep.  Insomnia sucks, and caffeine only does so much.

The jquery code that I was working on was in the middle of a huge swath of JavaScript code, so I didn't see (nor remember) code at the top and bottom that affected selects.

I had code in place (wrote it about a month ago) that defaulted the selects so that none were selected.  When I wrote it, client had no need for the selects to be populated when the form was submit.  Client recently changed his mind and made a few more requests, one of which required the selects to keep their selected options after form submit.  So there WAS more code that affected the selects, but I completely blanked on it.  Now I have to go through all that code, check for a form struct, and set the values with listQualify(), accordingly.  Sorry about the confusion.

*headdesk* *headdesk* *headdesk* *headdesk* *headdesk* *headdesk*

V/r,

^_^

[Carl Von Stetten]

Been there, done that, got the T-shirt...

[haxtbh]

So it was javascript causing the issue?

[WolfShade]

Yeah, code that was about 100 lines above where I was working, combined with code that was about 50 lines below where I was working, both written about a month prior.  Didn't see it, completely forgot all about it.  When the client changed his mind about the form submit and all that, it wasn't even a blip on my radar.  😕

V/r,

^_^