Best IT Recipes

HTML dropdown list

I want to have a drop-down list using the select, ... tag, but when it appears first, I want it to have 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 make "Please select a name" as an option, but then the user will be able to select this ... this is not what I want. Do I need to use javascript for this function or what do I need to do?

If there is a jquery way to do this, it will be very useful

+51
html
Dec 03 '10 at 23:46
source share
14 answers

As the first option, use <option value="">- Please select a name -</option> and use JavaScript (and authentication) to verify that the user has selected something other than an empty value.

+18
Dec 03 '10 at 23:48
source share

Try it:

 <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 you click on the drop-down list, the user will not be able to re-select this option.

Hope this helps.

+107
Dec 04 '10 at 1:44
source share

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

Thus, the user cannot see this option, but he is displayed in the selection field.

+43
Jan 18 '13 at 19:16
source share

This is an old post, but it worked for me

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

+10
Oct. 17 '14 at 10:13
source share

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

+6
Mar 22 '14 at 21:33
source share

Perhaps this will help you solve without JavaScript. http://htmlhelp.com/reference/html40/forms/option.html

See option DISABLE

+3
Dec 03 '10 at 23:51
source share

Just, I suppose. The onclick attribute works well ...

 <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 choosing another option, if option 1 is selected, option 1 will be selected. If you want an explanation about JavaScript, just ask.

+3
Dec 04 2018-10-12T00:
source share
 <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>
+2
Jul 26 '15 at 14:19
source share

If you want to achieve the same for jquery-ui selectmenu, then you must set 'display: none' to 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'); } });
+2
Feb 14 '16 at 16:55
source share

I'm sorry to have an old post, but I found a better way to do this

I believe this poster wanted:

 <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 the same answer - Thanks

+1
Apr 23 '13 at 22:28
source share
 <select> <option value="" disabled selected hidden>Select an Option</option> <option value="one">Option 1</option> <option value="two">Option 2</option> </select>
+1
Nov 29 '17 at 10:34 on
source share

Create a JavaScript control so that the selected option is different from your first choice before giving the cheek.

0
Dec 03 '10 at 23:47
source share

Here is how I do it 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 good documentation on this google site.

Hope this helps!

0
Dec 04 2018-10-12T00:
source share
  <select> <option value="" disabled="disabled" selected="selected">Please select a developer position</option> <option value="1">Beginner</option> <option value="2">Expert</option> </select>
0
Jun 24 '18 at 7:47
source share


More articles:


All Articles