How to show disable HTML select option in by default?

Solution 1:

use

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

Solution 2:

In HTML5, to select a disabled option:

<option selected disabled>Choose Tagging</option>

Solution 3:

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.

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

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