クリックしてメニューを表示するにはドロップダウンメニュー

Question

私はいくつかのパラメータに基づいて独自の予約フォームを作成したいと思います。実際にはドロップダウンメニューの構造を持ちたいと思います。 。例えば

：ホテルのブラウザの必要性について、買い手のクリックにした後

<select id="location_a"> 
    <option>Choose location</option> 
    <option value="hotel_a">Hotel A</option> 
    <option value="hotel_b">Hotel B</option> 
    <option value="hotel_c">Hotel C</option> 
</select> 

<select id="location_b"> 
    <option>Choose location</option> 
    <option value="hotel_a">Hotel A</option> 
    <option value="hotel_b">Hotel B</option> 
    <option value="hotel_c">Hotel C</option> 
</select> 

<select id="location_c"> 
    <option>Choose location</option> 
    <option value="hotel_a">Hotel A</option> 
    <option value="hotel_b">Hotel B</option> 
    <option value="hotel_c">Hotel C</option> 
</select> 

：

<select id="location"> 
    <option>Choose location</option> 
    <option value="location_a">Location A</option> 
    <option value="location_b">Location B</option> 
    <option value="location_c">Location C</option> 
</select> 

場所A、またはBまたはCのブラウザが必要上のユーザーがクリックした後は、ダウン他のドロップを表示します前もって2つのドロップダウンと3番目を表示：

<select id="microlocation"> 
    <option>Choose location</option> 
    <option value="micro_a">Micro location A</option> 
    <option value="micro_b">Micro location B</option> 
    <option value="micro_c">Micro location C</option> 
</select> 

<div class="micro_c">Address of Micro C location</div> 

など

助けをいただき、ありがとうございます。

私はshow/hide div jQueryの検索を試みましたが、これは1つのレベルでのみ機能します。

敬具

Answer 1

ここにそれをプログラムする方法です：私は選択の値をチェックし、それがデフォルトでない場合、それはリストを下に表示し続けます。

$("#location_b, #location_c").hide(); 
 

 
$("select").on("change", function() { 
 
    $("select").hide(); 
 
    if ($("#location_a").show().val() != "default") { 
 
    if ($("#location_b").show().val() != "default") { 
 
     $("#location_c").show(); 
 
    } 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 

 
<select id="location_a"> 
 
\t <option value="default">Choose location</option> 
 
\t <option value="hotel_a">Hotel A</option> 
 
\t <option value="hotel_b">Hotel B</option> 
 
\t <option value="hotel_c">Hotel C</option> 
 
\t </select> 
 

 
<select id="location_b"> 
 
\t <option value="default">Choose location</option> 
 
\t <option value="hotel_a">Hotel A</option> 
 
\t <option value="hotel_b">Hotel B</option> 
 
\t <option value="hotel_c">Hotel C</option> 
 
\t </select> 
 

 
<select id="location_c"> 
 
\t <option value="default">Choose location</option> 
 
\t <option value="hotel_a">Hotel A</option> 
 
\t <option value="hotel_b">Hotel B</option> 
 
\t <option value="hotel_c">Hotel C</option> 
 
\t </select>