First option of dropdown not an option; force to use other options

Question

<select name="name">
    <option>Select an option.</option><br/>
    <option>A</option><br/>
    <option>B</option><br/>
    <option>C</option><br/>
</select>

HTML5 has required="required", and this is the kind of effect I want with the dropdown above. I don't want the user to select "Select an option", only "A", "B", or "C". I know I could set a default value of A and just remove the "Select an option" option entirely, but I don't want users to click haphazardly without reading the options available.

Can this be done with HTML and/or JS?

just curious, why do you have line breaks inside between options? — Jerahmeel, Nov 22 '13 at 04:36
The HTML5 `required` attribute means that the user must select *some* option. The question seems to be about disallowing one of the options. — Jukka K. Korpela, Nov 22 '13 at 04:56
@JukkaK.Korpela, yes. I meant to make options A, B, and C required, but just as an example of what I wanted. — gator, Nov 22 '13 at 05:27

pixshatterer · Accepted Answer · 2013-11-22T04:51:23.280

20

edit: this code is only to force users to choose a valid option, instead of the one by default... validation for submit/change/etc should be added

You should just disable the first option and setting it as selected by default:

<select name="name">
  <option disabled="disabled" selected="selected">Select an option.</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

That should do the trick, demo here http://jsfiddle.net/pixshatterer/Q27HX/

edited Nov 22 '13 at 04:51

answered Nov 22 '13 at 04:40

pixshatterer

979
6
12

Cheers, I knew there was some simple solution using just HTML and no JS. You've helped a lot! – gator Nov 22 '13 at 05:27
2

Won't this allow 'Select an option' to be submitted if the dropdown isn't changed though? – Lee Dec 09 '14 at 10:23
1

Just tested this out myself... in Chrome version 68.0.3440.106 this allows the user to still submit without having made any changes to the default selected option. – Devon Kiss Oct 17 '18 at 04:35
1

Don't forget the empty value="" – Ivor Scott Jun 03 '22 at 17:37

Tieson T. · Answer 2 · 2021-02-04T06:45:40.730

If you use the Validation plugin (here: http://jqueryvalidation.org/) and update your <select> to supply value on each <option>, it will prevent form submission if the "empty" value is selected:

<select name="name" required>
    <option value="">Select an option...</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

It's also worth noting that the only valid child elements of a <select> is either <optgroup> or <option>, so remove those <br />s.

If jQuery is not an option, you could always add an onclick to the select or an onsubmit to the form and do a quick check on an empty string (or whatever you set the default value to).

agreed with @Tieson mentioned, those
are invalid markup inside a select tag — pixshatterer, Nov 22 '13 at 04:53

Abijeet Patro · Answer 3 · 2013-11-22T04:56:55.063

2

Just give display:none to the element option and disabled=disabled. Thanks to @pixshatterer

http://jsfiddle.net/Xh9nh/4/

EDIT : Put visibility:hidden by mistake.

edited Nov 22 '13 at 04:56

answered Nov 22 '13 at 04:32

Abijeet Patro

2,842
4
37
64

This isnt the best idea, users will still be able to select "select an option as an option" as seen here: http://jsfiddle.net/Xh9nh/2/ – agconti Nov 22 '13 at 04:38
@agconti, Made a mistake, check the modified answer. Put `visibility:hidden` by mistake. – Abijeet Patro Nov 22 '13 at 04:44
@Parto. Nice idea. On the first click it works great, but if you keep clicking around it still allows you to select "select an option". Im not sure why this is the case though. – agconti Nov 22 '13 at 04:51
@agconti, also if you use the keyboard, it allows you to select the option. Hmph ended up using `disabled` along with `display` – Abijeet Patro Nov 22 '13 at 04:56
Nice Idea and persistence though. +1 – agconti Nov 22 '13 at 04:58
@agconti, Thanks for testing too! :) – Abijeet Patro Nov 22 '13 at 04:59

First option of dropdown not an option; force to use other options

3 Answers3