使用 Jquery 填充选择选项

Posted 2023-02-24

【中文标题】使用 Jquery 填充选择选项

【英文标题】：Populating select option using Jquery

【发布时间】：2018-06-28 09:17:42

【问题描述】：

我想将选项填充到选择框中我正在使用 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....

【问题讨论】：

您说“我的代码运行良好，但现在我更改了获取数据的函数，结果消失了”。你以前有什么，你改变了什么？

我已经更新了我的问题

【参考方案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>');            

【讨论】：

先生，此代码不起作用，而是填充字段并且显示的结果未定义

很抱歉。修改了我的答案。请检查。

我已经解决了这个问题，实际问题是我没有解析 JSON 格式的结果，因为它没有正确显示

你给了我这个想法，但把它解析成 JSON 完全被我发现了，但仍然感谢你的宝贵时间和精力，这对我来说真的很重要。

【参考方案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);

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

【讨论】：

看起来你复制粘贴了我的答案来创建你自己的答案。不用担心！很高兴您的问题得到解决。编码愉快！