可扩展的多选下拉列表

Question

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

例如，在下面的快照中，如果我有Animals Cat，Cow等的子列表，是否有这样的插件会显示+号，当单击时，它会在相同的下拉列表中显示像树视图一样的子列表？

​

​

有什么建议吗？

Answer 1

仅仅是一个选择标记，我知道你不能。在你的例子中，你需要创建一个定制的选择框。

• 这可以使用html标签的组合来完成，就像JavaScript库的treeview插件一样，比如JQuery UI。但您对@Edgar评论说，没有多项选择。
• 也可以嵌入flash或java插件作为解决方案。

我猜我的示例解决方案并没有给你你想要的东西。我只举一个简单的例子，可以帮助回答你的问题。这将创建一个自定义的选择框。

自定义选择框

如何创建自定义选择框：

1. 创建一个div，它将成为列表的容器。

div上的<div id="treeSelect">

• Add样式，它的行为将像一个选择框。

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

• Add主列表的内容以及div上的子列表。包括所有可能样式，这些样式可用于格式化内容，使其更像树形视图列表。

所有+动物，猫，牛，狗，，

• ，添加一个脚本来处理如何查看子列表。

函数展开(列表，视图){

var listElement =document.getElementById(列表)；var defaultView = '+'；if(view.innerHTML == defaultView){ listElement.style.display =“块”；view.innerHTML = '-'；}否则{ listElement.style.display =“无”；view.innerHTML = '+'；}

}

我不能把所有的代码，所以请查看完整的代码。

我知道这不是你想要的东西，但我猜它很接近你需要的东西。你可以根据你的品味和需要改变风格。我希望这能对你有所帮助，让你知道如何解决你的问题。

Answer 2

您可以使用treeview plugin或jsTree plugin

希望这能有所帮助。干杯

Answer 3

您可以为每个子类别默认隐藏的主类别使用<optgroup>，当单击<optgroup>标签时，它可以简单地取消隐藏子<option>。

类似于以下内容：

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