Javascript 可扩展多选下拉列表

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

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

有什么建议吗？

您可以使用或

希望这有帮助。Cheers

您可以为默认情况下其子项隐藏的每个主要类别使用

，当单击

标签时，它可以简单地取消隐藏子项

如下所示：

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

---

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

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

我猜我的示例解决方案没有给你你想要的东西。我只举一个简单的例子来回答你的问题。这是为了创建自定义的选择框

自定义选择框

如何创建自定义的选择框：

创建一个将作为列表容器的div

在div上添加类似于选择框的样式

#树选择{高度：100px；宽度：150px；边框：1px实心#000；溢出：自动}

添加主列表的内容以及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>

}

我不能把所有的代码，所以请参阅完整的代码

---

我知道这不是你想要的东西，但我想这已经接近你需要的了。您可以根据自己的口味和需要更改样式。我希望这能对你有所帮助，让你知道如何解决你的问题

但我要找的是一个纯粹的多选下拉列表。理想情况下，我可以有一个子下拉列表并显示相应的子列表，但我希望避免提供像树视图这样的可选择功能！当用户单击此插件中的节点时，可以创建/删除一些隐藏项。我不知道有哪一个构建的控件具有您要求的功能，它完全是一个多选控件。我怀疑是否存在这样的插件，实现您自己应该不会太难，我同意。我知道了。我也有。当我尝试选择子列表元素时，它只是切换@尊敬的上帝啊，似乎我已经很久没有使用optgroups了，它们只是无法通过CSS真正访问，所以这可能不起作用。最好使用上面提到的treeview插件或jsTree插件，简单地将树样式设置为多选，但只需在单击时绑定操作即可更改表单值。这与我现在看到的类似！但是有一个问题我不能选择父元素。我想JS树插件是一个不错的选择……但我不喜欢复选框，我更希望它们像一个多选列表！通过一些修改和额外的CSS&JS，你可以得到你想要的外观。我没有让它与你想要的相似，因为有很多事情要做。与家长一起，你也可以添加一个复选框。我知道你会询问复选框，但是我没有时间让它像一个多选。你可以通过隐藏复选框来定制它，然后在

li

上添加

onClick

事件，这将是一个检查和取消选中它的事件。如果它被选中或未选中，你还可以更改

li

背景。同样，还有很多事情要做，但这是一个好的开始。我希望你能处理好剩下的事情。

<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>

var listElement = document.getElementById(list);
var defaultView = '[+]';

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