HTML select dropdown list

I want to have a drop down list using the select, option tag... but when it first appear I want it to have an information, such as "Please select a name" then the user clicks on the drop down list and selects from the available option... I tried to made the "Please select a name" as an option, but then the user will be able to select this... which is not what I want. Do I need to use javascript to have this feature or what do I need to do?

If there'a jquery way to do this, this would be much helpful

Try this:

<select>
    <option value="" disabled="disabled" selected="selected">Please select a name</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

When the page loads, this option will be selected by default. However, as soon as the drop-down is clicked, the user won't be able to re-select this option.

Hope this helps.

<select>
    <option value="" style="display:none">Choose one provider</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

This way the user cannot see this option, but it shows in the select box.

Have <option value="">- Please select a name -</option> as the first option and use JavaScript (and backend validation) to ensure the user has selected something other than an empty value.

This is an old post, but this worked for me

<select>
  <option value="" disabled selected>Please select a name...</option> 
  <option>this</option>
  <option>that</option>
</select>

  <select name="test">
      <option hidden="true">Please select a name</option>
      <option value="Cash">Cash</option>
      <option value="Draft">Demand Draft No.</option>
      <option value="Cheque">Cheque No.</option>
  </select>

Maybe this can help you resolve without JavaScript http://htmlhelp.com/reference/html40/forms/option.html

See DISABLE option

Simple, I suppose. The onclick attribute works nicely...

<select onchange="if(this.value == '') this.selectedIndex = 1; ">
  <option value="">Select an Option</option>
  <option value="one">Option 1</option>
  <option value="two">Option 2</option>
</select>

After a different option is selected, if the first option is selected, Option 1 will be selected. If you want an explanation on the javascript, just ask.

<select>
    <option value="" disabled="disabled" selected="selected">Please select name</option>
  <option value="Tom">Tom</option>
  <option value="Marry">Marry</option>
  <option value="Jane">Jane</option>
  <option value="Harry">Harry</option>
</select>

If you want to achieve the same for the jquery-ui selectmenu control then you have to set 'display: none' in the open event handler and add '-menu' to the id string.

<select id="myid">
<option value="" disabled="disabled" selected="selected">Please select     name</option>
 <option value="Tom">Tom</option>
 <option value="Marry">Mary</option>
 <option value="Jane">Jane</option>
 <option value="Harry">Harry</option>
 </select>

$('select#listsTypeSelect').selectmenu({
  change: function( event, data ) {
  	alert($(this).val());
},
open: function( event, ui ) {
	$('ul#myid-menu li:first-child').css('display', 'none');
}
});

I'm sorry to necro an old post - but I found a better way of doing this

What I believe this poster wanted was :

<label for="mydropdown" datalabel="mydropdown">Country:</label>    
<select name="mydropdown">
    <option value="United States">United States</option>
    <option value="Canada">Canada</option>
    <option value="Mexico">Mexico</option>
    <option value="Other">Not Listed</option>
</select>

I found this information in another post while searching for this same answer - Thanks

<select>
  <option value="" disabled selected hidden>Select an Option</option>
  <option value="one">Option 1</option>
  <option value="two">Option 2</option>
</select>

Make a JavaScript control that before the submit cheek that the selected option is different to your first option

This is how I do this with JQuery...

using the jquery-watermark plugin (http://code.google.com/p/jquery-watermark/)

$('#inputId').watermark('Please select a name');

works like a charm!!

There is some good documentation at that google code site.

Hope this helps!

    <select>
         <option value="" disabled="disabled" selected="selected">Please select a 
              developer position</option>
          <option value="1">Beginner</option>
          <option value="2">Expert</option>
     </select>