ドロップダウンリストの項目の選択に基づいてdivを追加します

Question

私はクライアントの要件の1つを完了するのに苦労しています。部分的に、私はそれを完了しましたが、私の目標を達成することはできません。

私はたくさんのGoogle検索を行っていますが、私が探しているものを見つけることができませんでした。

私はangularjsに非常に新しいですし、あなたは非常に単純な私の質問を見つけた場合はその日によって学習日はそう私に謝罪してください

質問：私はお互いに（スタック型）上に複数のdivをappenedする必要が

ドロップダウンリストの選択に基づいています。

マイ部分作業コードは次のとおりです。

HTMLコード：

<select id="shipping_selector" name="existing_us_ID"> 
<option value="0">SELECT</option> 
<option value="1">One</option> 
<option value="2">Two</option> 
<option value="3">Three</option> 
</select> 

<div id="data_1"> 
Div one 
<input type="text"> 
</div> 

<div id="data_2" >Div two<input type="text"></div> 
<div id="data_3">Div three<input type="text"></div> 

AngularJsコード：

$("#shipping_selector").change(function() { 
$('#data_1,#data_2, #data_3').hide(); 


    var id = $(this).val(); 


    $("#data_" + id).show(); 


}).change(); 

は、上記の作業コードは、一度に1つのdivが表示されます。例えば'One'を選択した場合は対応するdivが表示され、ドロップダウンリストから 'Two'を選択すると、対応するdivが表示され、前のdivが削除されます。

私の要件は、ドロップダウンの選択に基づいて2番目のdivを最初に追加するなどです。

タイムラインは私のために非常に短いので、どんな助けでも大歓迎です。

ありがとうございました！

Answer 1

ただ、最初にcssを通じてdivを隠し、この

$("#shipping_selector").change(function() { 
 
    var id = $(this).val(); 
 
    $("#data_" + id).show(); 
 
}).change();

#data_1,#data_2,#data_3{ 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="shipping_selector" name="existing_us_ID"> 
 
<option value="0">SELECT</option> 
 
<option value="1">One</option> 
 
<option value="2">Two</option> 
 
<option value="3">Three</option> 
 
</select> 
 

 
<div id="data_1"> 
 
    Div one 
 
    <input type="text"> 
 
</div> 
 

 
<div id="data_2">Div two<input type="text"></div> 
 
<div id="data_3">Div three<input type="text"></div>