I have a form that contains 5 select menus. Each menu has different ID / contents etc, but they all have an intial default option value of None. For example...
<select id="Menu_One" name="Menu_One">
<option value="None">None</option>
<option value="SomeValue">A value</option>
</select>
<select id="Menu_Two" name="Menu_Two">
<option value="None">None</option>
<option value="SomeValue">A value</option>
</select>
...and so on.
Once a user has completed the form, I'd like to feature a button that, when clicked, hides any select menu that has been left at the default value of "None".
Have racked my brain to work this one out, but am obviously missing something simple. Ideally needs to be a Javascript / jQuery solution.
Any ideas?
You can do this with plain Javascript. Just add this function call to your button click event.
let hideSelects = function()
{
const elements = document.querySelector("select");
for (var x=0, select; select = elements[x]; x++)
{
if (select.value === 'None')
{
select.style.display = 'none';
}
}
}