分层选址

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是最好的方法来解决这个问题，如果我使用的是selects，或者将每个条目作为一个具有该位置值的提交按钮。

问题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;
}
...

小提琴

如果使用<select>和<option>，则无法做到这一点，因为<option>不能选择必须在<select>之外的<div>。