CODEWITHSUNDEEP
jqueryselect
Meules
Meules

Reputation: 1389

Non selectable option value

What is the best way to add a new option to a dropdown menu, and make it so that it is non selectable and the first in the list?

So the list should look like this:

<select onchange="document.getElementById('product_configure_form').action = 'http://webshop.com/product/options/3603848/'; document.getElementById('product_configure_form').submit();" id="product_configure_option_22853" name="option[22853]">

  <option selected="selected" value="78619">Choose a size</option> // this is the new not selectable option
  <option selected="selected" value="78619">S</option>
  <option value="78620">M</option>
  <option value="78621">L</option>
</select>

I know how to add an option with:

$('#product_configure_option_22853').append('<option value="Choose" selected="selected">{{ 'select your size' | t }}</option>');

But how do I make it non selectable and the first on the list?

Upvotes: 1

Views: 4217

Answers (2)

Moob
Moob

Reputation: 16184

Use .prepend()

$('#product_configure_option_22853').prepend('<option value="Choose" disabled="disabled">{{ 'select your size' | t }}</option>');

Upvotes: 3

Fenton
Fenton

Reputation: 250932

You can't have both.

If you make an option disabled, it will be skipped in favour of a selectable option, even if it is first in the list:

<select>
    <option disabled>One</option>
    <option>Two</option>
    <option>Three</option>
</select>

In this example, option two will be shown as the default option. You can't make an option selected if it is disabled.

If you really need that behaviour, you would need to validate that the option was not selected, rather than relying on the HTML attribute for this.

Upvotes: 2

Related Questions