CODEWITHSUNDEEP
htmlformshtml-selecthtml4
user1433900
user1433900

Reputation: 207

Is there a way to have some text (not option) inside <select>?

We have a Select inside a form with say 4 options. My client wants to categorize options in a way so we can have some text on top related options. It will looks like: 

<select>
   Cat 01
   <option value="Some Value">Some Option</option>
   <option value="Some Value">Some Option</option>
   Cat 02
   <option value="Some Value">Some Option</option>
   <option value="Some Value">Some Option</option>
</select>

I know above is not a valid markup. I know I can put Cat01 & Cat02 as options without a value but I am wondering if there is a valid code or more appropriate workaround for it?

Upvotes: 1

Views: 168

Answers (3)

dimcookies
dimcookies

Reputation: 1930

You want to use the OPTGROUP tag

http://www.w3.org/wiki/HTML/Elements/optgroup

So your example should become 

<select>
   <optgroup label="Cat 01">    
     <option value="Some Value">Some Option</option>
     <option value="Some Value">Some Option</option>
   </optgroup>
   <optgroup label="Cat 02">
     <option value="Some Value">Some Option</option>
     <option value="Some Value">Some Option</option>
   </optgroup>
</select>

Upvotes: 1

Murtuza Kabul
Murtuza Kabul

Reputation: 6514

Yes there definately is

Try this

<select>
   <optgroup label="Cat 01">
   <option value="Some Value">Some Option</option>
   <option value="Some Value">Some Option</option>
</optgroup>
      <optgroup label="Cat 02">
   <option value="Some Value">Some Option</option>
   <option value="Some Value">Some Option</option>
   <option value="Some Value">Some Option</option>
</optgroup>
</select>

Upvotes: 6

Tomer
Tomer

Reputation: 17930

I believe what you need is optgroup:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Upvotes: 7

Related Questions