我正在尝试使用bootstrap-selectpicker以for循环形式显示更新按钮。
我有一个for循环,在每个循环中,我有一个带有多个select的窗体,带有selectpicker和一个按钮(在display中设置:none)以保存此表单中全部选择的值。
因此最后i将具有n个表单,并且对于每个表单x选择和按钮(在显示器中设置:none)以更新表单的值。
使用selectpicker文档中的代码
<script>
$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
$('.button_update').show();
});
</script>
我可以显示所有的更新按钮,但是我只想显示表单内部的更新按钮,在这里我改变了select中的值。
START of LOOP
<form id="skill_form">
<div class="col-12">
<div class="form-group">
<select name="skill_1" id="skill_1"
class="selectpicker form-control skill_select show-tick"
data-live-search="true"
data-size="10"
data-width="fit"
title="name">
<option value="value">name</option>
</select>
</div>
</div>
<div class="col-12">
<div class="form-group">
<select name="skill_2" id="skill_2"
class="selectpicker form-control skill_select show-tick"
data-live-search="true"
data-size="10"
data-width="fit"
title="name">
<option value="value">name</option>
</select>
</div>
</div>
<div class="row" style="margin:0; display:none;">
<!-- Update skills -->
<div class="col-12" style="padding: 0; text-align: center;">
<button type="submit"
form="skill_form"
class="btn btn-info button_update"
style="display: none; font-size: 1em;">Update</button>
</div>
</div>
</form>
END OF LOOP
<script>
$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
$('.button_update').show();
});
</script>
我试图传递参数,但我不知道如何传递,也无法将jquery放入循环中,传递循环中元素的id。
有人能帮忙吗?
1条答案
按热度按时间vc6uscn91#
我不能完全肯定能正确地解决这个问题。
无论如何,这里有一个演示,在文档就绪时将创建许多表单(本例中为5个),克隆一个给定的模板
#skill_form
,该模板在表单中有一个选择和一个按钮。模板中的所有元素都没有ID,因此当它被克隆以附加到文档时,不会违反唯一ID要求。在追加表单之后,将使用
.selectpicker()
初始化select元素,并向所有这些元素添加一个change事件处理程序。这样的处理程序将依赖于事件值(来自
e
)来确定哪个元素触发了事件,以及需要显示其自己的提交按钮的父表单是什么。我简化了这个场景,每个表单只使用一个select,并且克隆它们都是一样的,只是为了有一个包含多个表单示例的演示。
每一个都可以用不同的
action
填充,或者在它们的结构中更好地区分。因为显示的select元素只有一个选项,所以我添加了一个空选项,以便有机会触发
change
事件。第一个