CODEWITHSUNDEEP
javascriptjqueryhtmlcss
AKIWEB
AKIWEB

Reputation: 19612

How to design a ordered list inside a selection drop down menu

I wanted to try something like this inside my webpage, so below needs to look exactly inside a drop down list or statement.

  (a). Category1
          element1
          element2
          etc..

  (b).Category2
          element1
          element2
          etc..

This is how I tried, but it shows me in a normal drop down list menu instead to look like the above one.

<html>
 <body>
  <select>
    <ol>
     <option value=1><li>Category1</li></option>
     <option value =2><li>element1</li></option>
     <option value =3><li>element2</li></option>
     <option value =4><li>etc...</li></option>
     <option value =5><li>Category2</li></option>
     <option value =6><li>element1</li></option>
     <option value =7><li>element2</li></option>
     <option value =8><li>etc...</li></option>
    </ol>
   </select>
</body>
</html>

Any suggestion or idea, how can I do this using HTML CSS or any scripts? can we create a exact look inside the drop down menu? any help on this would be great!

Thanks

Upvotes: 0

Views: 425

Answers (1)

Carl
Carl

Reputation: 1816

I think the optgroup tag may be what your after?

Something like:

<select>
    <optgroup label="Category 1">
        <option value="2">element1</option>
        <option value="3">element2</option>
        <option value="4">etc...</option>
    </optgroup>
    <optgroup label="Category 2">
        <option value="5">element1</option>
        <option value="6">element2</option>
        <option value="7">etc...</option>
    </optgroup>
</select>

Demo: http://jsfiddle.net/z5KrN/

Upvotes: 4

Related Questions