Bootstrap-selectpicker循环表单中仅显示对应更新按钮求助

1. 修复表单ID唯一性问题 #

循环生成的表单不能共用同一个ID，这会导致HTML无效并引发后续交互问题。修改循环代码，为每个表单生成唯一ID（示例以PHP循环为例，可根据自身模板语言调整）：

START of LOOP (例如PHP: <?php foreach ($items as $index => $item): ?>)

<form id="skill_form_<?php echo $index; ?>">
    <!-- 原有selectpicker代码保持不变 -->
    
    <div class="row" style="margin:0; display:none;">
        <div class="col-12" style="padding: 0; text-align: center;">
            <button type="submit"
                    form="skill_form_<?php echo $index; ?>"
                    class="btn btn-info button_update"
                    style="display: none; font-size: 1em;">Update</button>
        </div>
    </div>
</form>

END OF LOOP (例如PHP: <?php endforeach; ?>)

2. 修改jQuery事件处理逻辑 #

利用DOM遍历，仅显示当前修改的selectpicker所在表单内的更新按钮：

$('.selectpicker').on('changed.bs.select', function () {
    // 获取当前修改的select所在的表单
    const $currentForm = $(this).closest('form');
    // 显示该表单内的更新按钮及其父容器
    $currentForm.find('.button_update').show();
    $currentForm.find('.row:has(.button_update)').show();
});

逻辑说明 #

• $(this) 指向触发事件的具体selectpicker元素
• .closest('form') 向上查找最近的表单父元素，精准定位当前操作的表单
• .find('.button_update') 仅在当前表单内查找更新按钮，避免影响其他表单的按钮
• 同时显示按钮所在的row容器（原代码中row也设置了display:none）

内容的提问来源于stack exchange，提问作者Mauro Vitamia