How to show disabled HTML select option by default?

Question

I am new to HTML and PHP and want to achieve a drop-down menu from a MySQL table and hard-coded options too. I have multiple select elements 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>

The problem is that now the user can also select "Choose Tagging" as an option, but I only want them to choose from the available three. I then used disabled as follows:

<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" becomes the default one. So I want to set "Choose Tagging" by default and also want to disable it from selection. The same thing needs to be done with another select which will fetch data from MySQL.

Is there a way to do this?

Coquet

how about add a click event on the select to disable the first option. – Breathing

You have to fix syntax error - value=""disabled should be disabled="disabled" + remove odd closing </select> tags – Guanajuato

@Guanajuato oops that </select> belongs to other part of my code – Coquet

@AnkitSharma i'be edited your code - you had </select><select><option>...<option> </select> – Guanajuato

@Guanajuato thanx..... </select> got copied from my code by mistake. – Coquet

@DavidSmith my task is done but still want to know what is click event. Is it by using form? – Coquet

Answer 1

Use

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

Gluey

You don't need to put the true or disabled values. you can get by doing <option selected disabled>Choose Tagging</option> – Trembles

@SamEaton,it just makes the code to follow the valid XHTML syntax,else in HTML5 you can neglect it. – Gluey

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

Technically selected="true" is invalid in html5. https://mcmap.net/q/37024/-what-values-can-appear-in-the-quot-selected-quot-attribute-of-the-quot-option-quot-tag – Numerator

Answer 2

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.

Val

This looks fancy. – Driveway

This is pretty useful! Thanks! – Sheikh

The hidden attribute has no effect on <option> elements in Safari. caniuse.com/mdn-html_global_attributes_hidden – Lancelot

Answer 3

In HTML5, to select a disabled option:

<option selected disabled>Choose Tagging</option>

Auriferous

Answer 4

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.

Erda

Answer 5

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>

Neidaneidhardt

This doesn't work, OP need it to be selected by default jsfiddle.net/tomsihap/5xm7grnb – Christadelphian

Answer 6

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>

Gough

Answer 7

Use selected on the option you want to select by default.

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

Baskin

This guidance was already posted on this question here: https://mcmap.net/q/126726/-how-to-show-disabled-html-select-option-by-default Your answer adds no new value to the page and only contributes to page bloat. – Pisa

Answer 8

 selected disabled="true"

Use this. It will work in new browsers

Corkhill

Answer 9

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>

Hydrocortisone

Answer 10

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.

Counsel

Answer 11

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>

Aiden

Answer 12

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

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

Enciso

Answer 13

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

Lamere