下拉列表包含10万个可能的值和序列重要的下拉列表与优雅的降级

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

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