如何在Select2编辑表单中显示并修改数据库返回的选中值

我帮你梳理下代码里的问题，然后给出修复后的完整方案——你的核心问题是AJAX模式下的Select2无法正确回显编辑数据，同时代码里还有几个小坑需要填平：

先看原代码的问题点 #

1. HTML里嵌套了两层<form>标签（form_open已经生成了表单，你又手动加了一个），会导致表单提交逻辑混乱
2. 重复定义了processResults函数，后面的会直接覆盖前面的，导致搜索参数传递失效
3. 用原生DOM方式设置选中项，但AJAX模式的Select2初始下拉里没有已选项，原生操作根本找不到对应的<option>
4. 选择器写错了：$("#searching")应该对应select的id#Name

修复后的完整代码 #

HTML部分（修正表单结构）

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<?php echo form_open('company2/do_update') ?>
<select id="Name" class="searching form-control" style="width:500px" name="company"></select>
<button type="submit" class="btn btn-info waves-effect waves-light">Save</button>
<?php echo form_close(); ?>
</body>

JavaScript部分（正确初始化+回显数据）

<script type="text/javascript">
$(document).ready(function() {
    // 初始化Select2组件
    $('.searching').select2({
        placeholder: 'Masukkan Nama Company',
        ajax: {
            url: "<?php echo base_url('company2/select2'); ?>",
            dataType: "json",
            delay: 250,
            // 正确传递搜索关键词给后端接口
            data: function(params) {
                return {
                    compClue: params.term // 对应后端接收的搜索参数名
                };
            },
            // 统一处理后端返回的选项数据
            processResults: function(data){
                var results = [];
                $.each(data, function(index, item){
                    results.push({ 
                        id: item.Name, 
                        text: item.Name 
                        // Select2只需要id和text，不需要额外的value属性
                    });
                });
                return { 
                    results: results, 
                    cache: true 
                };
            }
        }
    });

    // 回显已选中的数据库数据
    var selectedCompany = "<?php echo $row['Name'];?>";
    if(selectedCompany) {
        // 手动创建选项并添加到select中，同时标记为选中
        var option = new Option(selectedCompany, selectedCompany, true, true);
        $('#Name').append(option).trigger('change');
        // 触发change事件让Select2更新UI显示
    }
});
</script>

关键修复说明 #

1. 表单结构修复：去掉了重复的<form>标签，确保表单提交逻辑正常
2. AJAX参数传递：添加了data函数，把用户输入的搜索关键词正确传给后端接口
3. 回显逻辑优化：用Select2官方推荐的方式创建选项并设置选中——因为AJAX模式下初始下拉是空的，原生DOM操作找不到选项，必须手动添加后触发change事件让Select2识别
4. 清理冗余代码：去掉了重复的processResults和多余的value属性，保持代码简洁

额外提示 #

如果后端的select2接口需要支持精准匹配已选中的公司名称，建议在接口里判断：如果没有传入搜索关键词（或者专门加一个编辑模式的参数），就返回所有可选公司，或者单独返回当前已选中的公司数据，这样Select2回显时会更稳定。

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