gpt4 book ai didi

javascript - 为 Bootstrap 添加和删除两个下拉动态字段

转载 作者:行者123 更新时间:2023-12-03 07:42:52 26 4
gpt4 key购买 nike

我有两个用 bootstrap 3.3.6 制作的下拉式自定义时间选择器。我需要添加和删除动态自定义时间选择器。

这是时间选择器的图片。 time picker

在这里您可以找到代码

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

enter image description here当案例两个不同的领域时,我无法管理该怎么做。

在我的一个文本字段中,添加按钮被粘贴到字段上,但在第二个文本字段中,添加按钮是单独的,因为我有两个百搭按钮。

提前致谢

最佳答案

试试这个代码。您只需要一个添加按钮,而不是在所有行元素中添加按钮。并且需要添加一个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>

关于javascript - 为 Bootstrap 添加和删除两个下拉动态字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35334726/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com