1

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

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

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

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

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

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

4

2 回答 2

1

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

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

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

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

于 2012-04-05T12:19:36.727 回答
1

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

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

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

于 2012-04-05T12:25:12.213 回答