具有10000个可能值的下拉列表和顺序重要下拉列表与优雅递减

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

下面是一个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 不 负载。只是一个想法。