可扩展的多选下拉列表

Question

如何获得可扩展的[树视图]多选下拉列表？

例如，从下面的快照中，如果我有动物的子列表[Cat，Cow等]，那么任何插件都会显示一个+号，当点击时，它会显示子列表像树视图一样的下拉？

有什么建议吗？

Answer 1

仅仅是一个选择标签，我知道你不能。在您的情况下，您需要创建自定义选择框。

• 这可以使用html标记的组合来完成，就像treeview之类的JavaScript库的JQuery UI插件一样。但你对@Edgar评论说没有多选择。
• 同时嵌入flash或java插件也是一种解决方案。

我想我的示例解决方案没有给你你想要的确切内容。我只举一个简单的例子，可以帮助回答你的问题。这是为了创建一个自定义的选择框。

自定义选择框

如何创建自定义选择框：

1. 创建一个div作为列表的容器。

   <div id="treeSelect">

2. 在div上添加样式，就像选择框一样。

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

3. 在div上添加主列表的内容以及子列表。包括可用于格式化内容的所有可能样式，使其更像树视图列表。

   <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. 添加一个脚本，用于处理如何查看子列表。

   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 = '[+]';
   }
   

   }

我无法提供所有代码，请参阅jsfiddle以获取完整代码。

我知道这不是你想要的确切内容，但我想它接近你需要的东西。您可以根据自己的品味和需求改变风格。我希望这可以是一个帮助，并让你知道如何解决你的问题。

Answer 2

您可以使用treeview plugin或jsTree plugin

希望这会有所帮助。干杯

Answer 3

默认情况下，您可以为其子项隐藏的每个主要类别使用<optgroup>，点击<optgroup>标签时，只需取消隐藏子项<option>即可。< / p>

如下所示：

在你的CSS中：

#categories optgroup option { display: none; }

在您的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>

在你的JavaScript中（使用jQuery）：

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