How to show disable HTML select option in by default?

163
votes

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.

11
htmlhtml-select
how about add a click event on the select to disable the first option. – David Blacksmith
You have to fix syntax error - value=""disabled should be disabled="disabled" + remove odd closing </select> tags – Evgeniy
@Evgeniy oops that </select> belongs to other part of my code – Ankit Sharma
@AnkitSharma i'be edited your code - you had </select><select><option>...<option> </select> – Evgeniy
@Evgeniy thanx..... </select> got copied from my code by mistake. – Ankit Sharma

11 Answers

336
votes

use

<option selected="true" disabled="disabled">Choose Tagging</option>
41
votes

In HTML5, to select a disabled option:

<option selected disabled>Choose Tagging</option>
19
votes

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.

11
votes

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
votes

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

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>
4
votes
 selected disabled="true"

Use this. It will work in new browsers

3
votes

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
votes

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

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

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