使用 Jquery 填充选择选项

Question

我想将选项填充到选择框中我正在使用 ajax 从数据库中获取一些记录，并且在它的成功函数中我正在填充字段我的代码工作正常但现在我已经更改了我正在获取的函数数据和我的结果都消失了，这意味着它不再显示，但我也想要这个功能，这是我的 jQUery 的代码。

$('#cq-select-model').click(function () {
    $.ajax({
        url: ajaxurl,
        data: {action: 'getPopulateField'},
        type: 'GET',
        success: function (data) {
            console.log(data);
            var $year = $('#car-years');
            var $make = $('#car-makes');
            var $model = $('#car-models');
            $year.find('option').remove();
            $make.find('option').remove();
            $model.find('option').remove();
            $make.append('<option value="Ferrari">Ferrari</option>');
            for (var i in data.model) {
                $year.append('<option value=' + data[i].year + '>' + data[i].year + '</option>');
                $model.append('<option value=' + encodeURIComponent(data[i].model) + '>' + data[i].model + '</option>');
            }
            $('#cq-show-data').show();
            $('.show-data-desc').show();
        }
    });
});

这是我从数据库中获取记录的函数的代码。

我之前有这个功能：

function getPopulateField() {
global $wpdb;
$data = $wpdb->get_results("SELECT * FROM wp_ovdq_populate_fields");
wp_send_json($data);
}
add_action('wp_ajax_getPopulateField', 'getPopulateField');
add_action('wp_ajax_nopriv_getPopulateField', 'getPopulateField');

并将我的功能更改为：

function getPopulateField() {
global $wpdb;
$model = $wpdb->get_results("SELECT DISTINCT model FROM wp_ovdq_populate_fields ORDER BY model ASC");
$year = $wpdb->get_results("SELECT DISTINCT year FROM wp_ovdq_populate_fields");
$data = array_merge($model, $year);
wp_send_json($data);
}
add_action('wp_ajax_getPopulateField', 'getPopulateField');
add_action('wp_ajax_nopriv_getPopulateField', 'getPopulateField');

通过使用这个函数，我得到了类似这样的 json 响应。

 `200
:
{model: "Mondial Quattrovalvole"}
201
:
{model: "Mondial T"}
202
:
{model: "Mondial T Cabriolet"}
203
:
{model: "Portifino"}
204
:
{model: "Testarossa"}
205
:
{year: "1947"}
& More....

Answer 1

合并year 和model 的2 个数组会导致问题。

在JS 中，当您循环遍历JSON 时，索引为0 即data[0].year，年份不可用。

要解决此问题，您可以更改PHP 端的数组结构，如下所示

$data = array('model' => $model, 'year' => $year);

在JS中，分别循环model和year

for (var i in data.model) {
    $model.append('<option value=' + encodeURIComponent(data.model[i].model) + '>' + data.model[i].model + '</option>');
}

for (var i in data.year) {
    $year.append('<option value=' + data.year[i].year + '>' + data.year[i].year + '</option>');            
}

Answer 2

刚刚找到将其发布在此处的解决方案，以便将来对其他人有所帮助。实际的问题是数据没有以 JSON 格式解析，因此没有正确附加结果，如果有人愿意，这里是更新后的代码。

Jquery：

$('#cq-select-model').click(function () {
    $.ajax({
        url: ajaxurl,
        data: {action: 'getPopulateField'},
        type: 'GET',
        success: function (data) {
            var object = $.parseJSON(data);

            var $year = $('#car-years');
            var $make = $('#car-makes');
            var $model = $('#car-models');
            $year.find('option').remove();
            $make.find('option').remove();
            $model.find('option').remove();
            $make.append('<option value="Ferrari">Ferrari</option>');
            for (var i in object.model) {
                $model.append('<option value=' + encodeURIComponent(object.model[i].model) + '>' + object.model[i].model + '</option>');
            }

            for (var j in object.year) {
                $year.append('<option value=' + object.year[j].year + '>' + object.year[j].year + '</option>');
            }
            $('#cq-show-data').show();
            $('.show-data-desc').show();
        }
    });
});

PHP 脚本

function getPopulateField() {
global $wpdb;
$model_array = array();
$year_array = array();
$model = $wpdb->get_results("SELECT DISTINCT model FROM wp_ovdq_populate_fields ORDER BY model ASC");
$year = $wpdb->get_results("SELECT DISTINCT year FROM wp_ovdq_populate_fields");

$data = array(
    'model' => $model,
    'year' => $year
);

$data_send = json_encode($data);
wp_send_json($data_send);
}

这个解决方案在我的情况下完美无缺。