HTML / JavaScript中可用的分层下拉菜单？答案

【问题标题】：Usable hierarchical dropdown in HTML/JavaScript?HTML / JavaScript中可用的分层下拉菜单？
【发布时间】：2013-03-22 15:46:52
【问题描述】：

我遇到了一个主要是可用性问题。

我有一长串考古发现的等级类别（200 多个）。当用户发布他的发现时，他需要从这个列表中选择一个类别：

青铜时代
- 家用工具
- 珠宝
- 军事
- - 长矛
- ...
中世纪
- 珠宝
- 宗教文物
- ...
二战
- 德国
- - 军事
- - - 徽章
- - - - 步兵
...

列表无法在不丢失信息的情况下进行剪切/划分，所以我想保持原样。

如何让它更实用？典型的 2 个用例是：

逐级选择（首先确定是青铜时代、中世纪……然后是珠宝、军事……然后是矛……）
搜索（用户知道是项链，但不知道是中世纪早期还是中世纪晚期等）

如何将这两者结合起来？有没有现成的解决方案？

谢谢！

【问题讨论】：

您可以使用多个下拉菜单，例如，用户在第一个下拉菜单中选择青铜时代，然后在第二个下拉菜单中选择军事，然后选择 Spears...
使用jQuery autocomplete 插件可能吗？您将能够进行一个又一个级别的搜索，并且对于每个级别，都有一个搜索的可能性。这样，如果用户只知道最后一级文本，他就可以输入它，当只有一行匹配时，你可以自动选择其他级别。
<optgroup>?
IMO，有一个自动完成文本框，旁边有一个搜索图标，它会显示一个包含上述信息的可折叠树的模式窗口。
实施所有变体并询问您的用户。

标签： javascript html usability html-select cascadingdropdown

【解决方案1】：

如果这有帮助，要整理出第一个用例，您可以在 HTML 中执行以下操作：

Age: 
<select name='age' id='age' onchange="showRelevantRuleDropdown(this,1);">
     <option value='0'>Bronze Age</option>
     <option value='1'>Middle Age</option>
     ...
</select>

<select name='BronzeAge' id='BronzeAge' onchange="showRelevantRuleDropdown(this,1);">
     <option value='0'>Household tools</option>
     <option value='1'>Jewelry</option>
     ...
</select>

<select name='MiddleAge' id='MiddleAge' onchange="showRelevantRuleDropdown(this,1);">
     <option value='0'>Jewlery</option>
     <option value='1'>Religious artifacts</option>
     ...
</select>

...

<script language='JavaScript'>
showRelevantRuleDropdown(document.getElementById('age'),1);
</script>

使用下面的 Javascript：

function showRelevantRuleDropdown(elem, restore) {
    // Show one SELECT element (elem) between Option 1 or Option 2
    // If the parameter restore is 1, the hidden element is restored to its default value
    if (elem.selectedIndex == 0) {
        document.getElementById('BronzeAge').style.display = 'none';
        document.getElementById('MiddleAge').style.display = 'inline';
        if (restore == 1) {
            document.getElementById('BronzeAge').getElementsByTagName('option')['0'].selected = 'selected';
        }
    }
    else {
        document.getElementById('MiddleAge').style.display = 'none';
        document.getElementById('BronzeAge').style.display = 'inline';
        if (restore == 1) {
            document.getElementById('MiddleAge').getElementsByTagName('option')['0'].selected = 'selected';
        }
    }
}

这适用于一层深度，但可以轻松扩展。

如果你想使用，我有 codepen 中的代码：http://codepen.io/ophintor/pen/FaHbh

【讨论】：

【解决方案2】：

好吧，您可以将自动完成模型与您需要使用的层次结构结合起来。见下图。

然后，用户不需要查找或导航整个树来选择他们想要选择的项目，而不会丢失层次结构上下文。我认为这满足了高级用户的需求。

尽管如此，您应该提供一种在树中导航（显示整个树）的方法，以帮助新手用户浏览。也许可以在搜索框旁边放置一个图标/文本链接。

不幸的是，我没有发现任何地方都实现了这样的功能。

【讨论】：