如何逐步增强国家和州选择字段？答案

【问题标题】：How can I progressively enhance country and state select fields?如何逐步增强国家和州选择字段？
【发布时间】：2012-04-05 11:58:00
【问题描述】：

我还没有看到任何网站正确地做到这一点......

如果我有两个选择字段，country 和 state，那么我会这样编码：

<select name="country">
    <option>USA</option>
    <option>France</option>
</select>

<select name="state">
    <option></option>
</select>

然后我会根据国家/地区的选择使用 AJAX 填充州字段。

但是，这是逐渐增强的状态。不使用 Javascript 怎么办？以及应该如何增强它（如果前面的例子不是最好的方法）？

【问题讨论】：

什么例子。您刚刚发布了两个选择。 state 将包含法国的哪些内容？您有美国各州的静态列表吗？渐进增强是什么意思？你是什么意思“没有JavaScript” - css？ cssportal.com/css3-preview/…
你必须使用 JavaScript。它被称为多组合框
这是一个非常简单的 CSS3 版本，基于我提供的链接 jsfiddle.net/mplungjan/c9M45
我第一次听说，@jacktheripper。在没有 JavaScript 的情况下实现这种形式的任何技术？
@jacktheripper：-1。表单绝不能需要 JavaScript。像表单这样简单的东西是不用js总是可行的。

标签： javascript ajax html progressive-enhancement

【解决方案1】：

我的建议是在国家/地区下拉列表旁边/下方有一个提交按钮。提交后，服务器将填充所选国家/地区的状态并发送回响应。

现在，在页面加载的 javascript 中隐藏此按钮并将更改处理程序附加到国家/地区下拉列表并进行 AJAX 调用，该调用将返回状态。

因此，如果禁用了 javascript，则该按钮将执行状态检索。如果启用 AJAX 调用也会这样做。

【讨论】：

这种方法与 Bergi 的答案相比有什么优势（即使用 optgroups）？
@zejesago 你最终不会得到一个带有 10000 个 option 元素的 select。
@robertc 好点。也许我只是懒得为少数没有 JS 的用户做额外的编码。哈哈。
@zejesago 你应该关注的问题不是让它在没有 JS 的情况下可用，而是让它在没有 JS 的情况下可用（和/或没有鼠标，和/或看障碍）。跨度>

【解决方案2】：

一种解决方案可能是将两个选择连接在一起。喜欢

<select name="countryAndState">
    <option>USA - Alabama</option>
    <option>USA - Alaska</option>
    ...
    <option>France - Alsace</option>
    <option>France - Aquitaine</option>
</select>

或更好

<select name="countryAndState">
    <optgroup label="USA">
         <option>Alabama</option>
         ...
    </optgroup>
    <optgroup label="France">
         <option>Alsace</option>
         ...
    </optgroup>
</select>

当然，至少在第二种形式中，您必须确保选项values 是唯一的。 optgroup element 是将select 选项按树顺序分层的推荐方法。这意味着，您增强的 javascript 也将能够从 DOM 中提取树结构。

另一种解决方案是填充州字段服务器端，即将表单分成两个步骤，首先选择国家，然后选择州。这可以通过 cookie 或其他东西来保存所选国家/地区；并且每当country 的提交值与保存的值不同时，您需要输出一个新的（未选中）状态select 元素。

【讨论】：

是的，我认为 optgroup 的东西比阶梯式服务器端解决方案更可取，因为您将能够用它填充 JS 结构。