javascript - display disabled option element - html drop down form - Stack Overflow

admin管理员组

文章数量:1310431

I have a drop down html form and would like to display the disabled=disabled element (view the edit below)
At first initial glance, the form skips the disabled element and displays "option 1".

<select>
    <option disabled='disabled'>Title</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Is this possible with just html or css?
If not then how about jQuery or javascript?

Edit
Would like the form to look like this


Currently it looks like

I have a drop down html form and would like to display the disabled=disabled element (view the edit below)
At first initial glance, the form skips the disabled element and displays "option 1".

<select>
    <option disabled='disabled'>Title</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Is this possible with just html or css?
If not then how about jQuery or javascript?

Edit
Would like the form to look like this


Currently it looks like

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 31, 2013 at 17:02 s_p asked Jan 31, 2013 at 16:36 s_ps_p 4,69388 gold badges5959 silver badges9595 bronze badges 8

• @OneTrickPony can you elaborate please – s_p Commented Jan 31, 2013 at 16:38
• You have posted the right answer as your question. – techfoobar Commented Jan 31, 2013 at 16:38
• @t q: what's the question here exactly? You want to disable a certain option with javascript? – nice ass Commented Jan 31, 2013 at 16:40
• @OneTrickPony When the user views the form I would like them to se the disabled option, so in my case they would see "Visible Title" rather than 'Option 1' as their first choice. But because it is disabled they would NOT be able to click this element. – s_p Commented Jan 31, 2013 at 16:44
• 1 Disabled options are displayed, but greyed out and unselectable. – Barmar Commented Jan 31, 2013 at 16:46

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 9

Add selected="selected" to your first option.

<select>
    <option selected="selected" disabled='disabled'>Visible Title</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

jsFiddle example

本文标签： javascriptdisplay disabled option elementhtml drop down formStack Overflow