CODEWITHSUNDEEP
javascriptcssselecthtml-select
Prajila V P
Prajila V P

Reputation: 5317

Menu tree inside dropdown/selectbox

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?

Upvotes: 0

Views: 9660

Answers (2)

Arun Aravind
Arun Aravind

Reputation: 1318

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>

Upvotes: 0

lukaleli
lukaleli

Reputation: 3627

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.

Upvotes: 1

Related Questions