多表单select切换异常修复：实现仅作用于当前表单的事件处理

问题背景 #

曾查找过同类技术问题但均未找到有效解决方案，一度陷入困境。

场景说明 #

页面支持创建多个账号，每个账号对应一个独立的配置表单，填写后可保存。

问题现象 #

切换任意一个表单中的connType下拉选项时，所有其他表单的输入区域会同步变化。例如：已保存的账号表单下拉显示选项1（I Connection），新建账号时选择选项2（M G Connection），此时已保存表单的输入区域会变为选项2对应的状态（仅输入区域变化，下拉框仍显示选项1）。

相关代码 #

HTML代码（省略部分输入框） #

<form action=".." method="post" class="parsingSettingsForm">
                               
     <div class="form-group row">
         <div class="col-md-3">
             <select class="form-control form-control-sm connType" name="connection_type">
                  <option value="1" <?= $parsing_settings->connection_type && (int)$parsing_settings->connection_type === 1 ? 'selected' : ''; ?>>I Connection</option>
                 <option value="2" <?= $parsing_settings->connection_type && (int)$parsing_settings->connection_type === 2 ? 'selected' : ''; ?>>M G Connection</option>
              </select>
          </div>
     </div>

    <div class="form-group row">
       <div class="col-md-4 iconn" style="<?= (int)$parsing_settings->connection_type === 2 ? 'display: none' : '';?>">
          <input type="hidden" name="account_id" value="<?= $parsing_settings->ID ?>"/>
          <input class="form-control input-sm" id="fullname" placeholder="" type="text"
                                           name="server_path"
                                           value="<?= (isset($parsing_settings->server_path) ? $parsing_settings->server_path : '') ?>"/>
                                </div>
        <div class="col-md-2 mgconn" style="<?= (int)$parsing_settings->connection_type === 1 ? 'display: none' : '';?>">
           <input class="form-control input-sm" placeholder="" type="text" name="port" value="<?= (isset($parsing_settings->port) ? $parsing_settings->port : '') ?>"/>
                                    
                                </div>
<div class="aright">
     <button class="btn btn-sm btn-primary submitButton" type="submit">Save</button>
</div>

原JavaScript代码 #

$('form.parsingSettingsForm').closest($("select.connType").off('change').on('change', function () {
                if (Number(this.value) === 1) {
                    $(".mgconn").hide();
                    $('.mgconn input').prop('required', false);
                    $(".iconn").show();
                } else if (Number(this.value) === 2) {
                    $(".mgconn").show();
                    $('.mgconn input').prop('required', true);
                    $(".iconn").hide();
                }
            }));

问题分析 #

原JS代码中，切换下拉选项时使用全局选择器（如$(".mgconn")）会选中页面上所有匹配的元素，导致所有表单的输入区域都被修改，而不是仅作用于当前操作的表单。

最终解决方案 #

通过绑定折叠面板的shown.bs.collapse事件，限定操作范围为当前展开的折叠面板内的元素，确保仅修改当前表单的输入区域：

$(`.parentdiv`)
    .on('shown.bs.collapse', function () {
        var $collapseDiv = $(this);

        $collapseDiv.find('select.connType').off('change').on('change', function () {
            if (Number(this.value) === 1) {
                $collapseDiv.find(".mgconn").hide();
                $collapseDiv.find('.mgconn input').prop('required', false);
                $collapseDiv.find(".iconn").show();
                $collapseDiv.find(inputServerPath).prop('required', true);
            } else if (Number(this.value) === 2) {
                $collapseDiv.find(".mgconn").show();
                $collapseDiv.find('.mgconn input').prop('required', true);
                $collapseDiv.find(".iconn").hide();
                $collapseDiv.find(inputServerPath).prop('required', false);
            }
        });
    });

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