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

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

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

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

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

但是，这是逐渐增强的状态。如何在没有使用Javascript的情况下完成？如何增强它（如果前面的例子不是最好的方法）？

来源

2012-04-05 zgosalvez

是什么例子。您刚刚发布了两个选择。 _state_包含哪些法国？你有美国的静态状态列表吗？什么逐渐增强意味着什么？你是什么意思“没有JavaScript” - CSS？ http://www.cssportal.com/css3-preview/showing-and-hiding-content-with-pure-css3.htm – mplungjan 2012-04-05 12:04:10

你必须使用JavaScript。它被称为multicomboboxes – jacktheripper 2012-04-05 12:10:00

这是一个非常简单的CSS3版本，基于我给的链接http://jsfiddle.net/mplungjan/c9M45/ – mplungjan 2012-04-05 12:13:47

我的建议是在国家下面/下面有一个提交按钮。提交时，服务器将填充所选国家的状态并将响应发回。

现在，在你的页面上的JavaScript负载隐藏这个按钮，并附加在国家下拉的变更处理程序，并进行AJAX调用，这将返回状态。

所以，如果javascript被禁用，按钮将执行状态检索。如果启用AJAX调用会做同样的事情。

来源

2012-04-05 12:25:12 Ramesh

与Bergi的答案（即使用optgroups）相比，这种方法的优点是什么？ – zgosalvez 2012-04-05 12:28:16

@zejesago您最终不会选择带有10000个'option'元素的'select'。 – robertc 2012-04-05 12:32:32

@robertc好点。也许我只是懒惰地为没有JS的少数用户做额外的编码。哈哈。 – zgosalvez 2012-04-05 12:39:54

一个解决方案可能是将两个选择结合在一起。像

<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元素。

来源

2012-04-05 12:19:36 Bergi

伟大的修改提示。我会记住这一点。谢谢。 – zgosalvez 2012-04-05 12:48:20

是的，我认为optgroup对于服务器端解决方案来说更可取，因为您可以使用它来填充JS结构。 – Bergi 2012-04-05 12:51:19

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

回答

相关问题