分层选择的位置

Question

首先，我要做的是允许用户使用国家，县，城镇和城市的数据库缩小其位置。

一次性向每个城市展示它们太过分了，所以我希望它们缩小过滤器的范围。

Ebay用他们的类别来做这件事：

我打算用它来实现它：

http://jsfiddle.net/z8qbn6zw/3/

 <select>
    <option selected disabled>Choose country</option>
    <option value="volvo">England</option>
    <option value="saab">Wales</option>
    <option value="mercedes">Ireland</option>
    <option value="audi">Scotland</option>
</select>
<select class="hidden">
    <option selected disabled>Choose State</option>
    <option value="volvo">Avon</option>
    <option value="volvo">London</option>
    <option value="saab">Kent</option>
</select>
<select class="hidden">
    <option selected disabled>Choose City</option>
    <option value="volvo">Town A</option>
    <option value="saab">Town B</option>
    <option value="mercedes">Town C</option>
    <option value="audi">Town D</option>
</select>

我有点卡住，因为这将成为更大表单的一部分，有时用户不会启用javascript。

问题1：如果我使用选择，或者将每个项目作为具有该位置值的提交按钮，那么HTML标记是解决此问题的最佳方式。

问题2：我应该如何处理用户可能没有启用javascript并且这将成为更大表单的一部分这一事实。

之前尝试此操作的人的任何意见和建议都将受到赞赏。

Answer 1

如果你需要在没有javascript的情况下工作，你可以这样做：

<input type="radio" name="rgroup" id="sel1">Selection 1</input>
...

<div id="cont1" class="container">
    <input type="radio">Something 1</input>
    ...
</div>

CSS：

.container {
    display: none;
}

#sel1:checked ~ #cont1 {
    display: block;
}
...

Fiddle

如果您使用<select>和<option>，则无法执行此操作，因为<option>无法选择必须在<div>之外的<select> {{1}}。