On my form, I'm trying to make the select box display the standard "select one" option so the user can click on it and pick among the 3 options I've made. I want this part of the form to be required while also not allowing the default option to go through. Any help in making the first option not work would be appreciated! Thank you!
<option selected="selected">Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
Just change
<select required>
<option value="" selected>Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
Users can never submit the default option.
You could have the Select one
option be both selected
and disabled
, like this.
function validate(self) { console.log(self.value); }
<select onchange="validate(this)" required> <option disabled selected>Select one</option> <option value="air">On the air</option> <option value="web">On the web</option> <option value="both">Both</option> </select>
onchange
event will trigger whenever a new value is chosen in the dropdown. selected
tag makes sure its the default option. disabled
tag makes sure it can't be chosen as an actual option. required
tag prevents the form from submitting if the dropdown value is still its default. The "select one" text should really not be an option, but instead a label
<label>Select One:</label> <select> <option value="air">On the air</option> <option value="web">On the web</option> <option value="both">Both</option> </select>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.