197

I am new to HTML and PHP and want to achieve a drop-down menu from the mysql table and hard-coded too. I have multiple select in my page, One of them is

<select name="tagging">
    <option value="">Choose Tagging</option>
    <option value="Option A">Option A</option>
    <option value="Option B">Option B</option>
    <option value="Option C">Option C</option>
</select>

Problem is now that user can also select "Choose Tagging" as his tagging but i only want to provide him to chose from available three. I used disable as

<select name="tagging">
    <option value="" disabled="disabled">Choose Tagging</option>
    <option value="Option A">Option A</option>
    <option value="Option B">Option B</option>
    <option value="Option C">Option C</option>
</select>

But now "Option A" became the default one. So i want to set "Choose Tagging" as by default and also want to disable it from selection. Is it a way to do this. Same thing need to be done with other select which will fetch data from Mysql. Any suggestion will be appreciable.

6
  • how about add a click event on the select to disable the first option. Feb 26, 2014 at 6:55
  • You have to fix syntax error - value=""disabled should be disabled="disabled" + remove odd closing </select> tags
    – Evgeniy
    Feb 26, 2014 at 6:58
  • @Evgeniy oops that </select> belongs to other part of my code Feb 26, 2014 at 7:03
  • @AnkitSharma i'be edited your code - you had </select><select><option>...<option> </select>
    – Evgeniy
    Feb 26, 2014 at 7:03
  • @Evgeniy thanx..... </select> got copied from my code by mistake. Feb 26, 2014 at 7:08

13 Answers 13

411

use

<option selected="true" disabled="disabled">Choose Tagging</option>    
4
  • 80
    You don't need to put the true or disabled values. you can get by doing <option selected disabled>Choose Tagging</option>
    – Sam Eaton
    Feb 17, 2016 at 3:37
  • 27
    @SamEaton,it just makes the code to follow the valid XHTML syntax,else in HTML5 you can neglect it.
    – Cris
    Feb 18, 2016 at 5:34
  • 4
    You should set the value="" so if you also have required then an error will be raised to choose from the dropdown, otherwise a empty value gets passed even though nothing was selected. <option selected="true" disabled="disabled" value="">Choose Tagging</option>
    – user34612
    Jan 3, 2020 at 16:40
  • 1
    Technically selected="true" is invalid in html5. stackoverflow.com/a/24588336/9996381
    – Nick
    Aug 24, 2022 at 19:15
60

Use hidden.

<select>
   <option hidden>Choose</option>
   <option>Item 1</option>
   <option>Item 2</option>
</select>

This doesn't unset it but you can however hide it in the options while it's displayed by default.

2
  • 3
    This looks fancy. Aug 22, 2022 at 13:30
  • 3
    This is pretty useful! Thanks!
    – FFLNVB
    Sep 16, 2022 at 19:56
52

In HTML5, to select a disabled option:

<option selected disabled>Choose Tagging</option>
15

Electron + React.

Let your two first options look like this.

<option hidden="true">Choose Tagging</option>
<option disabled="disabled" default="true">Choose Tagging</option>

First to display when closed.

Second to display first when the list opens.

9

I know you ask how to disable the option, but I figure the end users visual outcome is the same with this solution, although it is probably marginally less resource demanding.

Use the optgroup tag, like so :

<select name="tagging">
    <optgroup label="Choose Tagging">
        <option value="Option A">Option A</option>
        <option value="Option B">Option B</option>
        <option value="Option C">Option C</option>
    </optgroup>
</select>
1
7

Another SELECT tag solution for those who want to keep first option blank.

<label>Unreal :</label>
<select name="unreal">
   <option style="display:none"></option>
   <option>Money</option>
   <option>Country</option>
   <option>God</option>
</select>

6
            <select name="dept" id="dept">
                <option value =''disabled selected>Select Department</option>
                <option value="Computer">Computer</option>
                <option value="electronics">Electronics</option>
                <option value="aidt">AIDT</option>
                <option value="civil">Civil</option>
            </select>

use "SELECTED" which option you want to select by defult. thanks

1
4
 selected disabled="true"

Use this. It will work in new browsers

4

we can disable using this technique.

<select class="form-control" name="option_select">
  <option selected="true" disabled="disabled">Select option </option>
  <option value="Option A">Option A</option>
  <option value="Option B">Option B</option>
  <option value="Option C">Option C</option>
</select>
1

If you are using jQuery to fill your select element, you can use this:

html

<select id="tagging"></select>

js

array_of_options = ['Choose Tagging', 'Option A', 'Option B', 'Option C']

$.each(array_of_options, function(i, item) {
    if(i==0) { sel_op = 'selected'; dis_op = 'disabled'; } else { sel_op = ''; dis_op = ''; }
    $('<option ' + sel_op + ' ' + dis_op + '/>').val(item).html(item).appendTo('#tagging');
  })

This will allow the user to see the first option as a disabled heading ('Choose Tagging'), and select all other options.

enter image description here

1

this should help....:)

<label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <option value=""selected="true" disabled="disabled"> Select</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
0

This will hide the option for you this easier that to make a other dropdown box

<option selected="true" disabled="disabled">Choose Tagging</option>    
-1

You can set which option is selected by default like this:

<option value="" selected>Choose Tagging</option>

I would suggest using javascript and JQuery to observe for click event and disable the first option after another has been selected: First, give the element an ID like so:

<select id="option_select" name="tagging">

and the option an id :

<option value="" id="initial">Choose Tagging</option>

then:

<script type="text/javascript">

$('option_select').observe(click, handleClickFunction);

Then you just create the function:

function handleClickFunction () {

if ($('option_select').value !== "option_select") 
{
   $('initial').disabled=true; }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.