Javascript: <select> tag not displaying options

Hi I’m developing a plugin and am using JS to create a setup page.
Im generating the setup page as a standard HTML page, copying the source code into a var in my J_plugin.js file and getting it to set the html content to the var…

so far working wonderfully, got beautiful CSS tabs and tables and buttons and everything BUT when i try adding a simple dropdown box it displays the box but none of the options…to clarify, when i view the html page separately (same html code) it displays fine but when uploaded to my Vera it displays an empty dropdown box???

eg.

<select id='DDbox'> <option>Sunday</option> <option value="Mon">Monday</option> <option value="Tue">Tuesday</option> <option value="Wed">Wednesday</option> <option value="Thu">Thursday</option> <option value="Fri">Friday</option> <option value="Sat">Satday</option> </select>

any ideas?

Sam

PS I’ve attached an example of what happens(although the HTML is identical to the first dropdown box, it behaves like the second one when uploaded)

I have very little experience with HTML but from the w3schools.com web page I see this:

The elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Example

Fiat

I’d try this.

You took great care to put the ID of your select field in single quotes. You also mentioned you are pasting your code into a var and then using that to send to the control panel content.

Your option statements use double-quotes. I’m guessing that your HTML var is using double quotes, and you’re getting the mixed results of using the delimiter within the string. Try changing all of your option tag quotes to single and see if it improves.

im using backticks to define the var as that allows both single and double quotes as well as multiline (JS equivalent of “[[” and “]]”) so

x=` <b>this is "double"</b> and... <i>this is 'single'</i> ` document.write(x)
would write this correctly:
this is “double”
and…
this is ‘single’

so unfortunately not a quote error…

as for the selected option, you are correct - I’m using this to default to Monday but in Vera it shows zero options to choose from (almost like its ignoring the tags altogether…)

appreciate the suggestions so far…

Sam

incidentally I tried dynamically creating the dropdown box using JS and innerHTML after the page has loaded only to befaced with same result… for anyone searching/interested with the same problem I found two workarounds which do display correctly but sadly not as easy to work with as the html dropdown box…

solution 1 easier to work with and update on the fly/show current values, solution 2 is (or can be) visually closer to html dropdown. Both work when uploaded to vera via J_pluginname.js
solution 1:
[url=https://www.w3schools.com/howto/howto_js_rangeslider.asp]https://www.w3schools.com/howto/howto_js_rangeslider.asp[/url]
modified to display text: [code]
d=[‘Mon’,‘tues’,‘wed’,‘thu’,‘frid’,‘sat’,‘sund’]

var slider = document.getElementById(“myRange”);
var output = document.getElementById(“demo”);
output.innerHTML = d[slider.value];

slider.oninput = function() {
output.innerHTML = d[this.value];
}
[/code] (changed the range to 0-6 as JS array index starts at 0 not 1)

solution 2:
[url=https://www.w3schools.com/howto/howto_js_dropdown.asp]https://www.w3schools.com/howto/howto_js_dropdown.asp[/url]

Regards,

Sam

Hi Sam,

Have you tried this for you first selection

<option value="Sun">Sunday</option>
The value that should show as default you can add selected=“selected” in the option. Most browsers are pretty relaxed to little omissions in the html code. Vera is not as it needs to parse your javascript and this way avoids possible adverse impacts to the overall GUI experience caused by errors in a plugin.

Cheers Rene

well spotted, option 3, write html correctly lol

just tried it and yes this works

[code]
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Satday

cheers reneboer!

Sam[/code]

That’s why posting a snippet of code helps. The time I spend reading over my own little typo’s like that could have been a nice long vacation (don’t tell the misses) ;D

Cheers Rene

lol secret safe with me :wink:

so I tried it again in my gui and the same thing happened!

I’ve since discovered that whilst testing offline in firefox, the doropdownbox isnt affected by changing its innerHTML via JS, however in vera it wipes the options. Changed the handling of it in my functions and all is well :smiley:

Sam