html-select - 具有 10,000 个可能值的下拉菜单和顺序重要的下拉菜单与优雅降级

Question

背景

我有这个表单专门使用 javascript 来搜索 ~5k 条目(供应商)并从中填充一个选择下拉列表(工厂，~10k 条目)。现在，它是一个需要 javascript 的表单。我想这样做，以便 javascript 错误不再使表单无法使用，但条目的数量和条目的顺序性质让我没有惯用的方法来提供基本的 html 版本。

问题

---

顺序/分层下拉菜单

顺序很重要的示例下拉列表: http://www.javascriptkit.com/javatutors/selectcontent2.shtml

因此显示顺序/分层下拉内容的“过滤”，其中第二个城市下拉列表中的选择根据第一个国家/地区下拉列表中的选择进行过滤。但是去掉 javascript，它会立即变得一团糟。马德里在美国？柏林在法国？序列被破坏。

具有大量选项的下拉菜单

如果您有一个包含 10k 个可能选项的选择下拉列表，则可以很容易地使用 javascript 过滤/搜索它们。另一方面，在没有 javacript 的情况下处理这些选项要困难得多。

当加载所有选项时，您如何为用户提供所有可能性，他们都会炸毁他们的浏览器？

---

可能的解决方案

顺序/分层选择框:

• 服务器端 2 部分表单。
• ？选择选项组？
• ???

选择大量选项:

• 服务器端两部分搜索表单。
• 条目名称的服务器端文本搜索匹配。
• ???

欢迎简单链接到足智多谋的解决方案。

Answer 1

我能想到的唯一解决方案是在每次需要缩小结果范围时使用表单提交。您首先显示一个页面以选择供应商的国家/地区。提交并返回一个页面，该页面将所选国家/地区显示为文本，现在有一个下拉列表可以选择下一个字段，例如城市。这样，服务器就可以在每个级别进行过滤。

这是一个 JSP 示例:

<c:choose>
    <c:when test="${empty country}">
        Country: 
        <form>
            <select>
                <option value="USA">America</option>
                <option value="DEU">Germany</option>
                <%-- ... --%>
            </select>
        </form>
    </c:when>
    <c:otherwise>
        Country: ${country} 
        <c:choose>
            <c:when test="${empty city}">
                <input type="submit" value="Change" />   <%-- Button to change the previous value --%>

                <%-- your form for choosing a supplier's city --%>                    
            </c:when>
            <c:otherwise>
                <%-- continue filtering until you have all of the data --%>
            </c:otherwise>
        </c:choose>

    </c:otherwise>
<c:choose>

当您选择一个国家时，表单会提交。您的服务器处理国家/地区，返回与 country 相同的页面字段值和下一个下拉列表的可能城市列表。这样做可以让您仅依靠表单提交(而不是 JavaScript)来按顺序过滤数据。您的服务器将负责跟踪用户走了多远。此解决方案的明显缺点是您的 JSP 会非常困惑，所有嵌套的 <c:choose> block 。

您也可以尝试混合解决方案:当页面加载时，查看您的 JavaScript 是否已加载。如果是这样，请将您的提交表单替换为带有 AJAX 的纯 HTML，以填充下一组选项。这样，当 JavaScript 确实 加载时，您的页面不必刷新很多次，但如果 JavaScript 没有 加载，页面仍然可以正常运行。只是一个想法。