계층화 된 선택 위치

Question

우선 내가하려는 것은 사용자가 국가, 군, 도시 및 도시의 데이터베이스를 사용하여 위치를 좁힐 수있게하는 것입니다.

한 도시에서 모든 도시를 보여주기에는 너무 많아서 필터를 좁히고 싶습니다.

이베이는 자신의 범주와 함께이 작업을 수행합니다

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> 

I이 있기 때문에 조금 붙어있어 :

내가 그것을 이런 식으로 뭔가를 구현하는 거라고 더 큰 형식의 일부가 될 것이며 때로는 사용자가 자바 스크립트를 사용할 수 없게됩니다.

질문 1 : 한 그 위치 값 submit 버튼으로 무엇 HTML 마크 업이 접근하는 가장 좋은 방법입니다, 나는 각 항목이 대신 선택을 사용하여, 또는한다.

질문 2 : 사용자가 자바 스크립트를 사용할 수없고 더 큰 형식의 일부가 될 수 있다는 사실에 어떻게 접근해야합니까?

이전에 시도한 사람의 의견이나 충고에 감사드립니다.

Answer 1

당신은 자바 스크립트없이 작업이 필요한 경우, 당신은 이런 식으로 작업을 수행 할 수 있습니다

<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>을 선택할 수 없기 때문에이 작업을 수행 할 수 없습니다. e <select>.