HTML select dropdown list

Question

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

Answer 1

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.

Answer 2

<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.

Answer 3

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.

Answer 4

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>

Answer 5

  <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>

Answer 6

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

See DISABLE option

Answer 7

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.

Answer 8

<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>

Answer 9

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');
}
});

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

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!

Answer 14

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