HTML is invalid <option>

Question

I have the following code snippet in the contact form for the site that I am designing:

<select id="Category" name="Category"> <option value="0" selected="selected" disabled>Category</option> <option value="1">General Info</option> <option value="2">Booking</option> <option value="3">Auditions</option> </select> 

I would like to set the menu so that the user cannot leave category as the selected parameter. Is there any way to do this using HTML? If not, how do I do this using JavaScript?

thanks

Answer 1

When the user clicks any option, he cannot return the first. But it can submit the form without changes, then you need to check through JS.

It’s pretty simple

 function validate() { var select = document.getElementById('Category'); return !select.value == 0; } 

And the form in HTML:

 <form onsubmit="return validate()">...</form> 

Answer 2

According to the HTML5 specification ,

Checking restrictions : if an element has its required attribute, and none of the option in the select element, the list of options have their selectedness set to true or the only option in the select element is the list of options with its selectedness set to true, this is the mark of the label label , then the element suffers lack of .

If the select element has the required specified, does not have a multiple attribute, and has a display size of 1; and if the value of the first option is the select element, the options list (if any) is an empty string, and the option parent node element is the select element (not optgroup ), then option choice element . ...

Therefore you can use

 <select id="Category" name="Category" required> <option value="" selected disabled>Category</option> <option value="1">General Info</option> <option value="2">Booking</option> <option value="3">Auditions</option> </select> 

Answer 3

Ideally, you simply remove the selected attribute from the disabled options on the server side when creating the HTML document to begin with.

Otherwise, if you use jQuery, this can be done quite easily with:

 $('#Category').find('option:not([disabled])').first().prop('selected', true); 

Add this to the ondomready event ondomready . This will cause the first parameter to be selected for this select element without disabling, regardless of its selected attributes. The disadvantage of this method is that it will prevent the use of the selected attribute in general with this select element.

On the other hand, if you are trying to create category headings in a select element, you should use the optgroup element optgroup , as this is the correct semantic markup for this:

 <select id="Category" name="Category"> <optgroup label="Category"> <option value="1">General Info</option> <option value="2">Booking</option> <option value="3">Auditions</option> </optgroup> </select> 

Answer 4

Disabling the selection function for you?

 <select id="Category" name="Category" disabled> <option value="0" selected="selected">Category</option> ... </select> 

Or everything can be disabled, except for the selected option, for you (as shown here: fooobar.com/questions/16710 / ... )