[GH-ISSUE #1685] Pull Down Menu Example #1431

New issue

Open

opened 2026-02-28 01:30:03 +03:00 by kerem · 2 comments

kerem commented

2026-02-28 01:30:03 +03:00

Owner

Originally created by @DanielLester83 on GitHub (Dec 4, 2023).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1685

Thought I'd share this html injection method to have a selection pull down menu while still setiing the value to a paremeter.

Explaination:

It creates a 'text' labeled 'ahot' that is made invisible with "style='width: 0px; padding: 0px; border: none'"
It closes the first tag
It creates a 'select' tag labled "sel"
When an option is selected it triggers code to set the 'text' input to be the value of that option
Next it creates the different option tags with values
Then It ends the 'select' tag
It runs a script to set the value of the 'select' input to be the value of the 'text' tag so they are the same when the page loads
It finally ends the script tag leaving the '>' symbol off because the code adds it latter

`WiFiManagerParameter aHotkey( "ahot", "Hotkey", "F12", 32, "readonly style='width: 0px; padding: 0px; border: none'>F10F11F12

Originally created by @DanielLester83 on GitHub (Dec 4, 2023). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1685 Thought I'd share this html injection method to have a selection pull down menu while still setiing the value to a paremeter. Explaination: 1. It creates a 'text' labeled 'ahot' that is made invisible with "style='width: 0px; padding: 0px; border: none'" 2. It closes the first tag 3. It creates a 'select' tag labled "sel" 4. When an option is selected it triggers code to set the 'text' input to be the value of that option 5. Next it creates the different option tags with values 6. Then It ends the 'select' tag 7. It runs a script to set the value of the 'select' input to be the value of the 'text' tag so they are the same when the page loads 8. It finally ends the script tag leaving the '>' symbol off because the code adds it latter `WiFiManagerParameter aHotkey( "ahot", "Hotkey", "F12", 32, "readonly style='width: 0px; padding: 0px; border: none'><select id='sel' onchange='this.form.ahot.value=this.value'><option value='F10'>F10</option><option value='F11'>F11</option><option value='F12'>F12</option></select><script>document.getElementById('sel').value=document.getElementById('ahot').value;</script");

kerem commented

2026-02-28 01:30:03 +03:00

Author

Owner

@tablatronix commented on GitHub (Dec 4, 2023):

You could just use customhead to inject js in case this breaks in the future

@tablatronix commented on GitHub (Dec 4, 2023): You could just use customhead to inject js in case this breaks in the future

kerem commented

2026-02-28 01:30:03 +03:00

Author

Owner

@DanielLester83 commented on GitHub (Dec 4, 2023):

You could just use customhead to inject js in case this breaks in the future

The way it's written here the script runs after the input and select are created, which seemed necessary in my tests.

@DanielLester83 commented on GitHub (Dec 4, 2023): > You could just use customhead to inject js in case this breaks in the future The way it's written here the script runs after the input and select are created, which seemed necessary in my tests.