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

Posted 2023-03-15

【中文标题】具有 10,000 个可能值的下拉菜单和序列重要的下拉菜单与优雅降级

【英文标题】：Dropdowns with 10 thousand possible values and sequence-important dropdowns vs. graceful degredation

【发布时间】：2011-01-15 10:35:19

【问题描述】：

背景

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

问题

---

顺序/分层下拉菜单

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

这样就显示了对顺序/分层下拉内容的“过滤”，其中第二个城市下拉列表中的选择会根据第一个国家下拉列表中的选择进行过滤。但是拿走 javascript，它可能会立即变得一团糟。美国马德里？法国柏林？序列已损坏。

具有大量选项的下拉菜单

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

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

---

可能的解决方案

顺序/分层选择框：

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

选择大量选项：

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

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

【问题讨论】：

返回最佳匹配的文本搜索怎么样？

实际上分别是 8344 和 14911 个条目，但我积极四舍五入。

【参考方案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 不 加载，您的页面仍然可以正常工作。只是一个想法。