CODEWITHSUNDEEP
jqueryhtmlforms
Cristian
Cristian

Reputation: 17

Inactivate but show option in multiple select

I have this multiple select , and as you can see , the first option and his name it´s SELECT YOUR OPTION 

<select name="services" multiple="" class="s_select">
<option>SELECT YOUR OPTION</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>

The problem it´s all people can select all options and also select this not value option called "SELECT YOUR OPTION" , yes it´s possible deactivate , etc , but i want continue to show this option , but that the people can´t select

My question it´s , how i can show "SELECT YOUR OPTION" value , and don´t let people select never , but also continue to show , i can´t find never in HTML code for do this , and i don´t know if using jquery it´s possible

I hope understand my question , thank´s for the help , regards

Upvotes: 0

Views: 26

Answers (1)

TheValyreanGroup
TheValyreanGroup

Reputation: 3599

There are two ways you could do this.

Option Disabled

This will show the option, but now allow it to be clicked

<select name="services" multiple="" class="s_select">
   <option disabled>SELECT YOUR OPTION</option>
   <option>Option 1</option>
   <option>Option 2</option>
   <option>Option 3</option>
   <option>Option 4</option>
   <option>Option 5</option>
</select>

OptGroup

You can put your first item as a group label to let it look like a heading and not selectable.

<select name="services" multiple="" class="s_select">
  <optgroup label="SELECT YOUR OPTION">
   <option>Option 1</option>
   <option>Option 2</option>
   <option>Option 3</option>
   <option>Option 4</option>
   <option>Option 5</option>
  </optgroup>
</select>

https://jsfiddle.net/vq56vtj5/1/

Upvotes: 2

Related Questions