0

Is there any way to include treemenu inside a dropdown/ selectbox. I have list of categories like

<ul id="example">
<li>Category1
    <ul>
        <li><a href="http://www.autisticcuckoo.net">Category1 subcat1</a></li>
        <li><a href="http://www.zeldman.com">Category1 subcat2</a></li>
        <li><a href="http://www.meyerweb.com">Category1 subcat3</a></li>
    </ul>
</li>
<li>Other Sites
    <ul>
        <li><a href="http://www.accessify.com/">Category2</a></li>
        <li><a href="http://www.w3.org/">Category3</a>
            <ul>
                <li><a href="http://validator.w3.org/">Category3 subcat1</a></li>
                <li><a href="http://jigsaw.w3.org/css-validator/">Category3 subcat2</a></li>
                <li><a href="http://www.w3.org/TR/WAI-WEBCONTENT/">Category3 subcat3</a></li>
            </ul>
        </li>
    </ul>
</li>

i want my category listing like tree menu. http://mackpexton.com/projects/TreeMenu/index.htm Now am using jquery chosen to display the selectbox. Is there any way to do this?

Prajila V P
  • 5,027
  • 2
  • 23
  • 36
  • http://stackoverflow.com/questions/5288792/how-to-indent-multiple-levels-of-select-optgroup-with-css – Mina Oct 05 '13 at 10:21

2 Answers2

1

You cannot do that inside selectbox. You can fake it, though. Create a container with selectbox and your ul list and button that will reveal it on click. Then after clicking any item in the list you should map clicked item to particular item in selectbox and update the value of visible button that triggers the dropdown.

lukaleli
  • 3,427
  • 3
  • 22
  • 32
0

You are complicating things. Why would anybody want to include a hierarchical menu in a select list. Select list is intended to display a list of items. How are you supposed to know which item you selected from the tree menu. (i mean how do you know the selected items path).

If you can site an example (usage), might be able to help you.

I have uploaded an image.. Is this what you are trying to achieve

enter image description here

This is what is called a tree menu.

enter image description here

The second image is from jquery chosen site. If this is what you want

you could easily achieve this. 

<select>
        <optgroup label="fruits">
            <option>Apple</option>
            <option>Apple</option>
            <option>Apple</option>
        </optgroup>
        <optgroup label="fruits">
            <option>Apple</option>
            <option>Apple</option>
            <option>Apple</option>
        </optgroup>
        <optgroup label="fruits">
            <option>Apple</option>
            <option>Apple</option>
            <option>Apple</option>
        </optgroup>
    </select>
Arun Aravind
  • 1,238
  • 10
  • 9
  • i want something like how jquery chosen works. It gives an alternative view of dropdown. But i have more number of categories and subcategories to display. So it is very difficult to scroll the dropdown. Thats y am checking for an tree menu type display. – Prajila V P Oct 07 '13 at 04:27
  • I have uploaded an image. Now this is what is called a tree menu. – Arun Aravind Oct 07 '13 at 07:01
  • Second image is what i got from jquery chosen site. – Arun Aravind Oct 07 '13 at 07:03
  • Main reason for my query is the length of my dropdown, having more number of categories and subcategories. Checking for a solution to reduce the size. So users can traverse the category easily. – Prajila V P Oct 07 '13 at 12:19
  • Tree menu is a good choice for increasing number of nodes. But the point is where and how are you gonna render it? If it is for a form, this menu should not be used. If it is for navigation, you could use it. – Arun Aravind Oct 07 '13 at 12:24
  • For a form, use something like the 'chosen'. It is the best practice – Arun Aravind Oct 07 '13 at 12:25