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

Question

我还没有看到任何网站都是这么做的......

如果我有两个选择字段，国家和状态，然后我会像这样的代码吧：

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

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

我然后将根据国家的选择使用AJAX填充状态字段。

但是，这是逐渐增强的状态。如何在没有使用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> 

当然，至少在第二个表，您必须确保该选项value s为唯一的。 optgroup element是按树形顺序对select选项进行分组的建议方法。这意味着，您的增强型JavaScript也将能够从DOM中提取树结构。

另一种解决方案是填充状态字段服务器端，即将表单分为两步，首先选择国家，然后选择状态。这可以通过cookie或其他方式来保存选定的国家;并且只要country的提交值与保存的值不同，就需要输出新的（未选中的）状态select元素。