2

背景

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

问题

顺序/分层下拉列表

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

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

具有大量选项的下拉菜单

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

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

可能的解决方案

顺序/分层选择框：

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

选择有大量选项：

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

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

4

1 回答 1

0

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

这是一个 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没有加载，它仍然可以正常工作。只是一个想法。

于 2010-12-29T19:18:10.717 回答