具有 10,000 个可能值的下拉列表和顺序重要的下拉列表与优雅的贬低

Question

背景

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

问题

---

顺序/分层下拉菜单

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

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

具有大量选项的下拉菜单

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

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

---

可能的解决方案

顺序/分层选择框：

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

具有大量选项的选择：

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

欢迎简单链接到资源丰富的解决方案。

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

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