javascript - HTML / JavaScript中可用的分层下拉菜单？

Question

我有一个主要的可用性问题。

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

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

列表不能在没有信息丢失的情况下被剪切/划分，所以我想保持原样。

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

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

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

谢谢！

Answer 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

Answer 2

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

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

不过，您应该提供一种在树中导航（显示整个树）的方法，以便让新手用户参与其中。也许可以在搜索框旁边放置一个图标/文本链接。

不幸的是，我在任何地方都找不到类似的东西。