Question

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

如果我有两个选择字段，国家/地区和状态，那么我会像这样编码：

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

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

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

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

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

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

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

Answer 2

我的建议是在国家/地区下方/下方设置提交按钮。提交后，服务器将填充所选国家/地区的状态并发回响应。

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

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

我如何逐步增强国家和州选择领域？

2 个答案: