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


Tags: javascript,jquery,html,css

Problem :

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



Solution :

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/


    CSS Howto..

    How to animate to position fixed?

    How to set Bootstrap @font-family-base?

    CSS Key animation: How do I make an image expand and shrink properly?

    How do I vertically centre a div of variable height within a div of variable height?

    How to styling div with CSS fixed width and auto-resize?

    How can I give the current page's link a disabled look?

    How can you stop the screen scrolling from the top of a Phonegap app?

    How to align form at the center of the page in html/css

    How to prevent page from jumping on menu open?

    How to dynamically change the value of a CSS property inside a stylesheet?

    How to define a CSS fontface?

    How to create animated border on hover

    How to disable properties of external css class and use internal css class with same name but different property in html

    Show and hide table column using jQuery

    how to remove space in TR and TD

    How do I achieve this animation using javascript/jquery? [closed]

    How to get just one parameter in 'clip' CSS property using JQuery? [duplicate]

    Show content on and off with Javascript

    How to line up a css ::before pseudo element like a grid

    CSS - How to make different background color from css file used [closed]

    How to center multiple inline-block elements with CSS?

    How to ensure updated files are served instead of cached ones?

    How to stretch images with no antialiasing

    How do I make my footer sit at the bottom of my content?

    How do you use CSS Selectors to select multiple elements? [duplicate]

    How to have background between two handles of jQuery Slider using css gradient

    How to make value text in form be italic

    How to format f.submit with css, glyphicons, and symbol?

    How to set css class on active menu item using a masterpage?

    How to make the contents of a div not wrap?