javascript - 分层选址

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> s 必须在 <select> 之外.