javascript - 可扩展的多选下拉列表

Question

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

例如，从下面的快照中，如果我有动物 [猫、牛等] 的子列表，是否有任何插件会显示 + 号，当单击时，它会在像 TreeView 一样的下拉菜单？

有什么建议吗？

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 上添加主列表的内容和子列表。包括可用于将内容格式化为更像 TreeView 列表的所有可能样式。

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

   函数扩展(列表、 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完整代码。

我知道这不是您想要的确切内容，但我想它接近您的需要。您可以根据自己的品味和需要更改样式。我希望这对您有所帮助，并让您了解如何解决您的问题。