Disabled options in a drop down box

You can gray out and disable an option in a select box (drop down box / list) with the following attributes.

  <option disabled="true" style="color:gray;">Mercedes</option>

The option canĀ“t be selected anymore but is still visible in the select box. This is a full code for a select box.

<select>
  <option>Volvo</option>
  <option>Saab</option>
  <option disabled="true" style="color:gray;">Mercedes</option>
  <option>Audi</option>
</select>

Let’s see if this is working for you. Test the disabled option in a drop down box. Link: drop down box with a disabled option

This is very useful in a product configurator. The option is still visible instead of deleted. Normaly in a cascading drop down box the options are deleted.

This entry was posted in Javascript and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>