jquery Bootstrap 选择for循环中标识符按钮

q8l4jmvw  于 2022-12-12  发布在  jQuery
关注(0)|答案(1)|浏览(120)

我正在尝试使用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。
有人能帮忙吗?

vc6uscn9

vc6uscn91#

我不能完全肯定能正确地解决这个问题。
无论如何,这里有一个演示,在文档就绪时将创建许多表单(本例中为5个),克隆一个给定的模板#skill_form,该模板在表单中有一个选择和一个按钮。模板中的所有元素都没有ID,因此当它被克隆以附加到文档时,不会违反唯一ID要求。
在追加表单之后,将使用.selectpicker()初始化select元素,并向所有这些元素添加一个change事件处理程序。
这样的处理程序将依赖于事件值(来自e)来确定哪个元素触发了事件,以及需要显示其自己的提交按钮的父表单是什么。
我简化了这个场景,每个表单只使用一个select,并且克隆它们都是一样的,只是为了有一个包含多个表单示例的演示。
每一个都可以用不同的action填充,或者在它们的结构中更好地区分。
因为显示的select元素只有一个选项,所以我添加了一个空选项,以便有机会触发change事件。
第一个

相关问题