Expandible Multiselect Dropdown list

How can I get an expandable [tree view] multiselect dropdown list?

For example, from the below snapshot, if I have sub-l开发者_开发技巧ist for Animals [Cat, Cow etc] is there any plugin as such that would show a + sign and when clicked, it would show the sub-list in the same dropdown like a tree view?

Any advice?

Just a select tag alone, I know you can't. In your case, you need to create a customized select box.

• This can be done using a combination of html tags, just like the treeview plugin of JavaScript library like JQuery UI. But you commented to @Edgar that there is no multi-select for that.
• Also embedding a flash or a java plugins can be a solution.

I guess my examples solution didn't give you the exact thing you wanted. I'll just give a simple example that could be a help to answer your question. This is to create a customized select box.

Customized Select Box

How to create the customized select box:

1. Create a div that will be a container of the list.

   <div id="treeSelect">

2. Add style on the div that will behave like a select box.

   #treeSelect{height: 100px;width: 150px;border: 1px solid #000;overflow: auto;}

3. Add the content of the main list along with the sublist on the div. Include all possible style that could be use to format the content to be more like a tree view list.

   <span class="mainList">All</span>
   <br />
   <span class="expand" onClick="expand('animals', this);">[+]</span><span class="mainList">Animals</span>
   <br />  
   <ul id="animals" class="subList">
       <li><input type="checkbox" name="animals" value="Cat">Cat</li>
       <li><input type="checkbox" name="animals" value="Cow">Cow</li>
       <li><input type="checkbox" name="animals" value="Cat">Dog</li>
   </ul>
   

4. Add a script that will handle how to view the sublist.

   function expand(list, view){

   var listElement = document.getElementById(list);
   var defaultView = '[+]';
   
   if(view.innerHTML == defaultView){
       listElement.style.display = "block";
       view.innerHTML = '[-]'; 
   } else {
       listElement.style.display = "none";
       view.innerHTML = '[+]';
   }
   

   }

I cannot put all the code so please see the jsfiddle for the complete code.

I know this is not the exact things you wanted, but I guess it is close to what you need. You can change the style based on your taste and needs. I hope this can be a help and give you idea how to solve your question.

You could use the treeview plugin or the jsTree plugin

Hope this helps. Cheers

You can use an <optgroup> for each main category whose children are hidden by default, and when clicking on the <optgroup> label it can simply unhide the child <option>(s).

Something like the following:

In your CSS:

#categories optgroup option { display: none; }

In your HTML:

<select name="categories" id="categories">
    <optgroup label="+ Animals">
        <option value="bird">Bird</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
    </optgroup>
</select>

In your JavaScript (using jQuery):

$('#categories > optgroup').click(function(){
    $(this).children().toggle();
});