根据下拉列表项的选择追加div

Question

我正在努力完成我的客户要求之一。 我已经完成了部分工作，但无法实现我的目标。

我在Google上搜索了很多，但找不到我想要的那个。

我对angularjs和学习每天都非常陌生，所以如果您发现我的问题很简单，请向我道歉

题：

我需要在下拉列表中选择彼此对应的多个div（堆栈形式）。

我的部分工作代码是：

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();

上面的工作代码一次只会显示一个div。 例如，如果我选择了“ One”，它将显示相应的div；如果我从下拉列表中选择了“ Two”，则它将显示相应的div并删除上一个div。

我的要求是将第二个div附加到第二个div上，依此类推（基于下拉选择）。

时间表对我来说很短，所以任何帮助将不胜感激。

谢谢！

Answer 1

最初只是通过css隐藏div ，然后在onChange上显示它们，就像这样

 $("#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>