对于分层数据来说，最好的 jquery 多选选择器是什么

Question

我今天有一个“扁平”下拉选择器，其中包含 200 多个项目。问题是该列表实际上是一个数据层次结构，所以我想看看是否有任何选择器可以显示数据层次结构，以便人们可以看到每个项目在整个列表中的位置。

现在我正在连接级别，因此它会显示类似这样的内容：

level 1 --> level 2
level 1 --> level 2
level 1 --> level 2 --> level 3

但我认为可能有一个更好的 UI 小部件，可以更轻松地从列表中进行选择，其中列表本身具有不同级别的数据。

Answer 1

试试这个复选框树

编辑 1

如果您使用的是最新版本，您可以根据您的具体需求轻松自定义它，例如在选择孩子时更改祖先的选择。请参阅下文：（

checkboxtree.js)

        onCheck: {
            /**
             * Available values: null, 'check', 'uncheck', 'checkIfFull'
             */
            ancestors: 'check', /* <--- CHANGE THIS */
            /**
             * Available values: null, 'check', 'uncheck'
             */
            descendants: 'check',
            /**
             * Available values: null, 'collapse', 'expand'
             */
            node: '',
            /**
             * Available values: null, 'check', 'uncheck'
             */
            others: ''
        },

---

编辑 2

如果您在使其正常工作时遇到问题，请检查：

• 您的 jquery.checkboxtree.js 版本为 0.5 [版本位于文件的第 8 行]。
• 您指的是本地副本，而不是外部版本，也不是缩小版本
• 确保您已将 'check' 更改为 ''

更改源代码也许不是最佳实践。更改参数的官方方法使用如下代码：

    $('#tree7').checkboxTree({
        onCheck: {
            ancestors: '',
            descendants: 'check'
        },
        onUncheck: {
        ancestors: 'uncheck'
        }
    });

您会在 此页面，并且可以看到它与'checkIfFull'选项一起使用。对我来说 '' 选项也有效。

Answer 2

听起来级联下拉列表可能比较合适。用户可以在此处从下拉列表中选择父级别，然后会看到另一个包含子项目等的下拉列表。这些通常在 Ebay 等网站上使用。

Stephen Walther 有一篇关于基础知识的旧帖子，可以帮助您入门。

请注意，并不总是需要对每个列表执行 Ajax 回调到服务器。您也许可以将完整列表加载到单独的 JavaScript 文件中的 JSON 对象中，并使用 JQuery 插件创建和加载下拉列表。快速搜索发现 这个，但我确信还有很多其他的。