使用jquery填充select选项

lymnna71 于 2021-06-21 发布在 Mysql

关注(0)|答案(2)|浏览(340)

我想将选项填充到选择框中我正在使用ajax从数据库中获取一些记录，在它的success函数中我填充字段我的代码工作正常，但现在我已经更改了从哪里获取数据的函数，我的结果消失了，这意味着它不再显示，但我也需要该功能这是我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....

mysql php wordpress jquery JavaScript

来源：https://stackoverflow.com/questions/48335893/populating-select-option-using-jquery

2条答案

按热度按时间

gstyhher1#

刚刚找到的解决方案张贴在这里，以便它可以帮助其他人在未来。实际的问题是数据没有在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);
}

这个解决方案在我的案例中是完美的。

赞(0）回复(0）举报 2021-06-21

q9rjltbz2#

合并2个数组 year 以及 model 是问题的根源。
在 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>');            
}

赞(0）回复(0）举报 2021-06-21

我来回答

使用jquery填充select选项

2条答案

相关问题

热门标签

最新问答