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

最初隐藏div至css，然后将其显示在onChange上

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: