Html option selected disabled cause select required not working

Question

<select name="status" required>
<option selected disabled>status</option>

I have set required attribute in html select.

My first option set selected disabled for display text.

However it will cause required attribute not working.

anyone know how to solve this problem?

Answer 1

You need to set the value attribute of option to an empty string:

<select name="status" required>
    <option selected disabled value="">status</option>
</select>

select will return the value of the selected option to the server when the user presses submit on the form. An empty value is the same as an empty text input ? raising the required message.

---

w3schools:

The value attribute specifies the value to be sent to a server when a form is submitted.

Example

document.querySelector('form').onsubmit = (e) => {
  e.preventDefault();
  const status = e.target[0].value;
  console.log(`Your status is: "${status}"`);
 }

<form>
  <select name="status" required>
    <option selected disabled value="">Select a status...</option>
    <option value="Good">Good</option>
    <option value="Bad">Bad</option>
   </select>
   <input type="submit" value="Submit">
 </form>