SELECT (multiple) options ignoring selected attribute

LEGEND ,
Mar 01, 2016 Mar 01, 2016

Copy link to clipboard

Copied

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,

^_^

TOPICS
Database access

Views

4.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Advocate , Mar 02, 2016 Mar 02, 2016
There is no javascript / jquery anywhere that interacts with this dropdown?

Likes

Translate

Translate
Guide ,
Mar 01, 2016 Mar 01, 2016

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 02, 2016 Mar 02, 2016

Copy link to clipboard

Copied

Hi, Carl,

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

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Mar 02, 2016 Mar 02, 2016

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 02, 2016 Mar 02, 2016

Copy link to clipboard

Copied

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,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Mar 02, 2016 Mar 02, 2016

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 02, 2016 Mar 02, 2016

Copy link to clipboard

Copied

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,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Mar 02, 2016 Mar 02, 2016

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 02, 2016 Mar 02, 2016

Copy link to clipboard

Copied

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,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Mar 02, 2016 Mar 02, 2016

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 02, 2016 Mar 02, 2016

Copy link to clipboard

Copied

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,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Mar 02, 2016 Mar 02, 2016

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 02, 2016 Mar 02, 2016

Copy link to clipboard

Copied

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,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Mar 02, 2016 Mar 02, 2016

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 02, 2016 Mar 02, 2016

Copy link to clipboard

Copied

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,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Mar 02, 2016 Mar 02, 2016

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Mar 02, 2016 Mar 02, 2016

Copy link to clipboard

Copied

So it was javascript causing the issue?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 02, 2016 Mar 02, 2016

Copy link to clipboard

Copied

LATEST

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,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines