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
This question is related to
html
Try this:
<select>_x000D_
<option value="" disabled="disabled" selected="selected">Please select a name</option>_x000D_
<option value="1">One</option>_x000D_
<option value="2">Two</option>_x000D_
</select>
_x000D_
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.
Maybe this can help you resolve without JavaScript http://htmlhelp.com/reference/html40/forms/option.html
See DISABLE option
This is an old post, but this worked for me
<select>_x000D_
<option value="" disabled selected>Please select a name...</option> _x000D_
<option>this</option>_x000D_
<option>that</option>_x000D_
</select>
_x000D_
<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>
Make a JavaScript control that before the submit cheek that the selected option is different to your first option
<select name="test">_x000D_
<option hidden="true">Please select a name</option>_x000D_
<option value="Cash">Cash</option>_x000D_
<option value="Draft">Demand Draft No.</option>_x000D_
<option value="Cheque">Cheque No.</option>_x000D_
</select>
_x000D_
<select>_x000D_
<option value="" style="display:none">Choose one provider</option>_x000D_
<option value="1">One</option>_x000D_
<option value="2">Two</option>_x000D_
</select>
_x000D_
This way the user cannot see this option, but it shows in the select box.
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>
<select>
<option value="" disabled="disabled" selected="selected">Please select a
developer position</option>
<option value="1">Beginner</option>
<option value="2">Expert</option>
</select>
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!
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');
}
});
Simple, I suppose. The onclick attribute works nicely...
<select onchange="if(this.value == '') this.selectedIndex = 1; ">_x000D_
<option value="">Select an Option</option>_x000D_
<option value="one">Option 1</option>_x000D_
<option value="two">Option 2</option>_x000D_
</select>
_x000D_
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.
Source: Stackoverflow.com