JSを使ってレスポンシブなドロップダウンを作成する方法は？

Question

私は個人的なプロジェクトに取り掛かりましたが、ドロップダウンリストから選択した値を保存して使用するのに問題があります。たとえば、次のように

<select id = "CarType" onchange = "cartype()"> 
    <option value = "car"> Car </option> 
    <option value = "suv"> SUV </option> 
</select> 

だから私は、作成しようとしています機能は、ユーザーが、私はより多くの2を移入SUVのモデルを一覧リストをドロップダウンしたいため、その選択に当時と「SUV」を選択し、そうだろうということですユーザーがSUV AとSUV Bを選択すると、出力は「SUV Bがより速くなります！」と表示されます。ユーザーが車を選んだ場合も同じ機能です。 2つのドロップダウンが比較されます。

サイドノート：電話をかける関数のこの種の比較データを保存する場所に関するアドバイスがあれば教えてください。

Answer 1

$('#CarType').on('change', function() { 
 
    // hide all .sub in advance and filter the one to show by changed value 
 
    $('.sub').hide().filter('#' + $(this).val()).show(); 
 
});

.sub { /* hide all .sub in advance */ 
 
    display: none; 
 
}

<select id="CarType"> 
 
    <option value="car"> Car </option> 
 
    <option value="suv"> SUV </option> 
 
</select> 
 

 
<!-- add .sub select boxes --> 
 
<select id="car" class="sub"> 
 
    <option value="car1"> car1 </option> 
 
    <option value="car2"> car2 </option> 
 
</select> 
 

 
<select id="suv" class="sub"> 
 
    <option value="suv1"> suv1 </option> 
 
    <option value="suv2"> suv2 </option> 
 
</select> 
 

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