点击表格编辑按钮时，如何将单元格值设为Select2默认选中值？

云上老周

2026-8-6

问题：编辑模态框中Select2下拉框默认选中表格行的农户名称

我是编程新手，使用Select2作为下拉选择框。点击表格的编辑按钮时，希望模态框中的Select2默认选中对应行的农户名称（比如第一行的“ANGREJ SINGH | KARAM SINGH | HAKAM SINGH”），而不是默认的“请选择”。

现有代码

1. 主页面数据表代码

<table id="hreg" class="table table-hover table-bordered align-middle">
    <thead>
        <tr>
            <th scope="col" style="display:none">ID</th>
            <th scope="col">序号</th>
            <th scope="col">日期</th>
            <th scope="col">农户</th>
            <th scope="col">预估袋数</th>
            <th scope="col">预估重量</th>
            <th scope="col">实际袋数</th>
            <th scope="col">实际重量</th>
            <th scope="col">状态</th>
        </tr>
    </thead>
    <tbody>
        <?php
            $srno = 1;
            $curr_seasonId = $_SESSION['seasonId'];
            $sql = "SELECT * FROM `$currdb`.`hregister` WHERE `season_id` = '$curr_seasonId'";
            $result = mysqli_query($conn, $sql);
            while($row=mysqli_fetch_assoc($result)){
                echo "<tr>
                <td style='display:none'>".$row['id']."</td>
                <td>".$srno."</td>
                <td>".$row["date"]."</td>
                <td>".$row["farmer"]."</td>
                <td>".$row["est_bags"]."</td>
                <td>".(($row["est_bags"]*$row["kgs_bag"])/100)."</td>
                <td>".$row["actual_bags"]."</td>
                <td>".(($row["actual_bags"]*$row["kgs_bag"])/100)."</td>
                <td>".$row["actual_bags"]."</td>
                <td><button class='edit btn  btn-sm btn-primary' style='float: left;' id=" . $row['id'] . "> 编辑</button>
                    <form action='' style='float: left;' class='ms-1' method='post'>
                    <input type='hidden' name='delete' value='" . $row['id'] . "' />
                    <button type='submit' ms-1 class='btn btn-sm btn-danger' id='" . $row['id'] . "' >删除</button></form></td>
                </tr>";
                $srno++;
            }
            ?>
    </tbody>
</table>

2. 编辑数据模态框代码

<div class="modal fade" id="edithreg" tabindex="-1" role="dialog" aria-labelledby="modalTitleId" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitleId">编辑堆存记录</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <form action="#" method="POST">
                    <label for="date_edit" class="form-label">日期</label>
                    <input type="text" class="form-control " id="date_edit" name="date_edit">
                    <script>
                    $(function() {
                        $('input[name="hdate"]').daterangepicker({
                            singleDatePicker: true,
                            showDropdowns: true,
                            minYear: 1901,
                            autoApply: true,
                            locale: {
                                format: 'YYYY-MM-DD'
                            }

                        })
                    });
                    </script>
                    <label for="farmer_name" class="form-label">农户</label>
                    <select class="form-select select2" aria-label="默认选择示例" id="farmer_name"
                        name="farmer_name" style="width: 100%" required>
                        <option value="" selected disabled>请选择</option>
                        <?php 
                                        $sql = "SELECT * FROM `$currdb`.`farmers`";
                                        $result = mysqli_query($conn, $sql);
                                         
                                         while ($row = mysqli_fetch_assoc($result)) {
                                                    echo'<option value="'.$row['name'].':'.$row['id'].'">'.$row['name'].'</option>';
                                                }
                                            ?>
                    </select>
                    <label for="est_bags" class="form-label">预估袋数</label>
                    <input type="text" class="form-control" name="est_bags" id="est_bags" aria-describedby="helpId"
                        placeholder="">
                    <label for="actl_bags" class="form-label">实际袋数</label>
                    <input type="text" class="form-control" name="actl_bags" id="actl_bags" aria-describedby="helpId"
                        placeholder="">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

3. 触发模态框的脚本

<script type="text/javascript">
edits = document.getElementsByClassName('edit')
Array.from(edits).forEach((element) => {
    element.addEventListener("click", (e) => {
        tr = e.target.parentNode.parentNode;
        id_h = tr.getElementsByTagName("td")[0].innerText
        date_h = tr.getElementsByTagName("td")[2].innerText
        farmer_h = tr.getElementsByTagName("td")[3].innerText
        estbag_h = tr.getElementsByTagName("td")[4].innerText
        actbag_h = tr.getElementsByTagName("td")[6].innerText

        date_edit.value = date_h;
        farmer_name.value = farmer_h;
        est_bags.value = estbag_h;
        actl_bags.value = actbag_h;
       
        $('#edithreg').modal('toggle');
        $('#edithreg .select2').select2({
            // placeholder: farmer_h,
            // data:data,
                width: 'resolve',
            dropdownParent: $('#edithreg')
}).defaults.select2(farmer_h);
    })
})

$(document).ready(function() {
    $('.repeater').repeater({
        initEmpty: false, // 也可设为true
        show: function() {
            $(this).slideDown(function() {
                $(this).find('.select2').select2({
                    placeholder: '请选择选项'
                });
            });
        },

        hide: function(deleteElement) {
            $(this).slideUp(deleteElement);
        },

        ready: function(setIndexes) {
            // $('.select2').select2({
            //     placeholder: '请选择选项'
            // });
            $('#edithreg .select2').select2({
                width: 'resolve',
            dropdownParent: $('#edithreg')
});
        },
        isFirstItemUndeletable: false
    })
});
</script>

解决方案

问题根源：模态框中Select2选项的value是农户名称:农户ID的组合，直接用表格行里的农户名称赋值，两者不匹配，所以无法选中。另外，Select2需要用特定方法更新选中状态，不能直接修改原生select的value。

步骤1：修改表格行，存储农户的完整选项值

在生成表格的PHP代码中，给“农户”列的<td>添加data-farmer-value属性，存储和模态框选项一致的名称:ID值：

情况1：`hregister`表已存储农户ID（如`farmer_id`字段）

修改农户列的代码：

<td data-farmer-value="<?php echo $row["farmer"].':'.$row["farmer_id"]; ?>"><?php echo $row["farmer"]; ?></td>

情况2：`hregister`表未存储农户ID

先修改查询语句，关联farmers表获取ID：

// 替换原来的$sql
$sql = "SELECT h.*, f.id as farmer_id FROM `$currdb`.`hregister` h 
        JOIN `$currdb`.`farmers` f ON h.farmer = f.name 
        WHERE h.season_id = '$curr_seasonId'";

再按情况1的方式修改<td>标签。

步骤2：修改编辑脚本，正确设置Select2选中状态

更新触发模态框的脚本，获取data-farmer-value的值，并用Select2的API设置选中：

<script type="text/javascript">
edits = document.getElementsByClassName('edit')
Array.from(edits).forEach((element) => {
    element.addEventListener("click", (e) => {
        tr = e.target.parentNode.parentNode;
        id_h = tr.getElementsByTagName("td")[0].innerText
        date_h = tr.getElementsByTagName("td")[2].innerText
        // 获取存储的完整选项值
        farmer_value = tr.getElementsByTagName("td")[3].getAttribute('data-farmer-value')
        estbag_h = tr.getElementsByTagName("td")[4].innerText
        actbag_h = tr.getElementsByTagName("td")[6].innerText

        date_edit.value = date_h;
        est_bags.value = estbag_h;
        actl_bags.value = actbag_h;
       
        $('#edithreg').modal('toggle');
        
        // 初始化Select2（确保模态框打开后初始化）
        $('#farmer_name').select2({
            width: 'resolve',
            dropdownParent: $('#edithreg')
        });
        
        // 设置选中值并触发change事件更新Select2
        $('#farmer_name').val(farmer_value).trigger('change');
    })
})

$(document).ready(function() {
    $('.repeater').repeater({
        initEmpty: false,
        show: function() {
            $(this).slideDown(function() {
                $(this).find('.select2').select2({
                    placeholder: '请选择选项',
                    dropdownParent: $(this).closest('.modal')
                });
            });
        },
        hide: function(deleteElement) {
            $(this).slideUp(deleteElement);
        },
        ready: function(setIndexes) {
            $('#edithreg .select2').select2({
                width: 'resolve',
                dropdownParent: $('#edithreg')
            });
        },
        isFirstItemUndeletable: false
    })
});
</script>

关键说明

存储正确的选项值：通过data-farmer-value把模态框选项需要的名称:ID值存在表格行里，点击编辑时能直接拿到匹配的值。
Select2的正确赋值方式：使用$('#farmer_name').val(目标值).trigger('change')，这是Select2官方推荐的更新选中状态的方法，直接修改原生select的value不会触发Select2的UI更新。
确保DropdownParent设置正确：模态框中的Select2必须指定dropdownParent为模态框，否则下拉菜单会跑到模态框外面。

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

点击表格编辑按钮时，如何将单元格值设为Select2默认选中值？

现有代码 #

1. 主页面数据表代码 #

2. 编辑数据模态框代码 #

3. 触发模态框的脚本 #

解决方案 #

步骤1：修改表格行，存储农户的完整选项值 #

情况1：hregister表已存储农户ID（如farmer_id字段）

情况2：hregister表未存储农户ID

步骤2：修改编辑脚本，正确设置Select2选中状态 #

关键说明 #