我如何才能逐步加强国家和州的选择领域

Question

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

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

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

然后，我会根据国家的选择，使用AJAX填充state字段。

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

Answer 1

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

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

因此，如果javascript被禁用，按钮将执行状态检索。如果启用AJAX调用，也会执行同样的操作。

Answer 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是按树状顺序对选择选项进行分层分组的推荐方式。这意味着，您的增强javascript还将能够从DOM中提取树结构。

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