Select option tag with “Please select” message

Question

I want a dropdown list with say the following options. And I want a please select info when no option is selected. I have implemented it through the code below. And the form is submitted when one option is selected. But the problem is when I navigate back to the page, and select the first option ie --Please Select--, my form gets submitted for that option too. Is there any solution for it, so that I could just display a --please select-- option when no option is selected and not submit the form for that particulat --please select-- option.??

<select onchange="this.form.submit()">
    <option>--Please Select --</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

Answer 1

You can use <option selected="selected" disabled="true">

Selected means it will be default, and then disabled stops it being clicked on.

Demo

<select onchange="this.form.submit()">
  <option selected="selected" disabled="true">--Please Select --</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Answer 2

Make the "Please Select" option disabled. This way the option will be initially selected but it can't be selected again.

<select onchange="this.form.submit()">
    <option disabled="true">--Please Select --</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

Answer 3

Here you go:)

<select onchange="if(this.value!='') this.form.submit();">
    <option value="">--Please Select --</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

Answer 4

you could do it in javascript.

<select onchange="if (this.selectedIndex !=0) { this.form.submit(); }">
    <option>--Please Select --</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

since this is a php you're probably dynamically generating your select options so you might need to change the code a bit.