为Bootstrap添加和删除两个下拉动态字段
我有两个使用bootstrap 3.3.6制作的下拉自定义时间选择器。我需要添加和删除动态自定义时间选择器。
这是时间选择器的图片。
在这里你可以找到代码
<div class="form-group">
<label class="col-md-3 control-label">Time</label>
<div class="col-md-1">
<div class="input-group">
<span class="input-group-addon">H</span>
<select class="form-control">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</div>
<span class="help-block">Hour</span>
</div>
<div class="col-md-1">
<div class="input-group">
<span class="input-group-addon">M</span>
<select class="form-control">
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
</div>
<span class="help-block">Minute</span>
</div>
<div class="col-md-1">
<div class="input-group">
<span class="input-group-btn">
<button id="plus" class="btn btn-success add-field-1" type="button">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
</div>
</div>
</div>
我正在使用此代码
为一个文本字段创建动态字段（您可以看到下图）var template = '<div class="input-group"><input type="text" class="form-control"/></div>',
minusButton = '<span class="input-group-btn"><button id="minus" class="btn btn-danger delete-field" type="button"><i class="glyphicon glyphicon-minus"></i></button></span>';
$('.add-field').click(function() {
var temp = $(template).insertBefore('.help-block');
temp.append(minusButton);
});
$('.fields').on('click', '.delete-field', function(){
$(this).parents('.input-group').first().remove();
});
当案件两个不同的领域，我无法管理如何做。
在我的一个文本字段中，添加按钮被粘贴到字段但是第二个是单独的，因为我有两个狂野。
提前致谢
1 个答案:
答案 0 :(得分：1)
试试这段代码。在所有行元素中只需要一个添加按钮而不是添加按钮。你需要添加一个div来追加动态元素
$(document).on('click', '#plus', function(){
var template = " <div class='form-group' id='extra'> "
+" <label class='col-md-3 control-label'>Time</label> "
+" <div class='col-md-1'> "
+" <div class='input-group'> "
+" <span class='input-group-addon'>H</span> "
+" <select class='form-control'> "
+" <option value='00'>00</option> "
+" <option value='01'>01</option> "
+" <option value='02'>02</option> "
+" <option value='03'>03</option> "
+" <option value='04'>04</option> "
+" <option value='05'>05</option> "
+" <option value='06'>06</option> "
+" <option value='07'>07</option> "
+" <option value='08'>08</option> "
+" <option value='09'>09</option> "
+" <option value='10'>10</option> "
+" <option value='11'>11</option> "
+" <option value='12'>12</option> "
+" <option value='13'>13</option> "
+" <option value='14'>14</option> "
+" <option value='15'>15</option> "
+" <option value='16'>16</option> "
+" <option value='17'>17</option> "
+" <option value='18'>18</option> "
+" <option value='19'>19</option> "
+" <option value='20'>20</option> "
+" <option value='21'>21</option> "
+" <option value='22'>22</option> "
+" <option value='23'>23</option> "
+" </select> "
+" </div> "
+" <span class='help-block'>Hour</span> "
+" </div> "
+" "
+" <div class='col-md-1'> "
+" <div class='input-group'> "
+" <span class='input-group-addon'>M</span> "
+" "
+" <select class='form-control'> "
+" <option value='00'>00</option> "
+" <option value='05'>05</option> "
+" <option value='10'>10</option> "
+" <option value='15'>15</option> "
+" <option value='20'>20</option> "
+" <option value='25'>25</option> "
+" <option value='30'>30</option> "
+" <option value='35'>35</option> "
+" <option value='40'>40</option> "
+" <option value='45'>45</option> "
+" <option value='50'>50</option> "
+" <option value='55'>55</option> "
+" </select> "
+" </div> "
+" <span class='help-block'>Minute</span> "
+" "
+" <div class='col-md-1'> "
+" <div class='input-group'> "
+" "
+" <span class='input-group-btn'> "
+" </button> <button id='minus' class='btn btn-danger delete-field' type='button'><i class='glyphicon glyphicon-minus'></i></button></span> </div> "
+" </div> "
+" </div> "
+" </div> ";
console.log("this");
$('#dynamic').append(template);
template="";
//temp.append(minusButton);
});
$(document).on('click', '.delete-field', function(){
console.log("re");
$('#extra').first().remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label class="col-md-3 control-label">Time</label>
<div class="col-md-1">
<div class="input-group">
<span class="input-group-addon">H</span>
<select class="form-control">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</div>
<span class="help-block">Hour</span>
</div>
<div class="col-md-1">
<div class="input-group">
<span class="input-group-addon">M</span>
<select class="form-control">
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
</div>
<span class="help-block">Minute</span>
</div>
<div class="col-md-1">
<div class="input-group">
<span class="input-group-btn">
<button id="plus" class="btn btn-success add-field-1" type="button">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
</div>
</div>
</div>
<div id="dynamic"></div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？