如何将PHP数组传递到JavaScript并将值逐个添加到下拉菜单选项

云原生阿岚

2026-10-13

问题原因

你的AJAX请求拿到的返回值response是JSON格式的字符串，而非JavaScript数组。直接遍历字符串时会按单个字符迭代，所以才会出现下拉选项拆分显示单个符号、数字的问题。

修复方案

有两种常用修复方式：

方案1：在AJAX配置中指定返回数据类型为JSON

给$.ajax增加dataType: 'json'配置项，jQuery会自动将返回的JSON字符串解析为JavaScript数组，修改后代码如下：

function get_code(){
    $.ajax({
            url : 'index_backend.php',
            type : 'POST',
            data : {"input":"code"},
            // 新增这行指定返回数据类型
            dataType: 'json',
            success : function(response) {
                var select = document.getElementById("colony_code");
                for(var i=0; i<response.length; i++){
                    var opt = response[i];
                    var el = document.createElement("option");
                    el.textContent = opt;
                    el.value = opt;
                    select.appendChild(el);
                }
            },
            complete: function(){
            }
    });
}

方案2：手动解析返回的JSON字符串

如果不方便修改AJAX配置，也可以在success回调里手动用JSON.parse()转换返回值：

success : function(response) {
    // 手动把JSON字符串转成JS数组
    var codeList = JSON.parse(response);
    var select = document.getElementById("colony_code");
    for(var i=0; i<codeList.length; i++){
        var opt = codeList[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
    }
}