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..

    CSS - How to show only a % of the top div with two identicals divs stacked over each other

    Showing HTML page with CSS attached in a WebView

    How to design the vertical scroll bar or customize the vertical scroll bar design?

    How can I make a display:flex container expand horizontally with its wrapped contents?

    How to convert an image for a website menu button into CSS

    How do I set dynamic width to a block element?

    How to make CSS background-image responsive? [duplicate]

    How to line up a label to the right of a styled checkbox

    CSS styling - how to put these two div boxes adjacent

    How do CSS radio tabs work?

    How to style input type file using css

    How can you resize li labels without resorting to coupling or absolute sizes?

    How to adjust 100% height to include height of added element

    Jquery: How to make the content showup below the navigation bar when the anchor link is clicked?

    How to add a class to a bar using jQuery?

    how to read value of style[“display”] property of webcontrol

    How to hide repeated content from search engines with CSS?

    How to make CSS visible only for Opera

    How to display inline input in li?

    How to insulate HTML widget from external CSS

    how to change height of div to covered the text area (CSS)

    How to read inline styling of an element?

    how to make an image “coming” to foreground

    How to target a child element of a multiple parent selector in SASS [duplicate]

    CSS / jQuery: How to prevent tooltip from disappearing behind border of main wrapper (working code)

    how to collapse navbar in twitter bootstrap after click on link if it woud be collapsed because of css? [closed]

    How to center an item inside of a DIV

    Switchery rendered wrong when triggering click after View is shown

    How can I animate a table row with a single column that spans multiple columns?

    How can I create a DIV that expands UP TO a height and then shows a scrollbar?