如何将Select2下拉框值作为参数传入AJAX请求URL？

核心问题点 #

1. AJAX请求的data参数格式错误，未指定参数键名，导致PHP无法获取customer参数
2. 错误手动修改Select2的innerHTML，Select2有专门的processResults回调处理返回数据
3. 第二个下拉框初始HTML包含无效PHP语法，需清空初始选项

修正后的代码 #

HTML

<select name='customer' id='customer' class='form-control' required>
    <option value=''>Select a Customer</option>
    <option value="cus1">customer1</option>
    <option value="cus2">Customer2</option>
    <option value="cus3">Customer3</option>
</select>

<select name='ivcCode' id='ivcCode' class='form-control' required multiple>
    <!-- 初始留空，由AJAX动态生成选项 -->
</select>

JavaScript

// 初始化第一个Select2
$("#customer").select2({
    theme: "bootstrap4",
    placeholder: "Select an option"
});

// 初始化第二个Select2
$("#ivcCode").select2({
    theme: "bootstrap4",
    placeholder: "Select Printers",
    ajax: {
        url: '/mysite/call/pm/?action=printer_codes',
        type: 'GET',
        data: function (params) {
            return {
                customer: $("#customer").val(), // 指定参数键名，对应PHP的$_GET['customer']
                search: params.term // 可选：保留搜索功能，不需要可删除
            };
        },
        dataType: "json",
        // 处理服务器返回的JSON，转换为Select2可识别的选项结构
        processResults: function (data) {
            return {
                results: data.map(item => ({
                    id: item.ivc_code, // 选项value值
                    text: `${item.ivc_code} - ${item.print_model_name}` // 选项显示文本
                }))
            };
        },
        delay: 250 // 延迟请求，避免频繁触发
    }
});

// 监听客户选择变化，触发第二个Select2重新加载数据
$("#customer").on('change', function() {
    $('#ivcCode').val(null).trigger('change'); // 清空现有选择并触发重新请求
});

PHP 服务器端（无需修改，确认逻辑正确）

$customerCode = $_GET['customer'];
$ivccodeArray = getPrinterCodesByCustomer($customerCode);
echo json_encode($ivccodeArray); 

说明 #

• Select2的AJAX配置中，processResults是核心回调，用于将服务器返回的JSON转换为Select2要求的id+text选项结构
• 监听第一个下拉框的change事件，确保用户切换客户时，第二个下拉框自动重新请求对应数据
• 移除了URL中多余的&customer，参数由data动态传递，更符合AJAX规范

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