可扩展的多选下拉列表

Question

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

For example, from the below snapshot, if I have sub-list 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?

Answer 1

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.

Answer 2

You could use the treeview plugin or the jsTree plugin

Hope this helps. Cheers

Answer 3

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();
});