当我们有对象时如何填充选择选项

Question

我已经使用 ajax 从数据库返回数据的查询现在我已经检查了响应并且我得到了以下格式的响应。

array(206) {
[0]=>
object(stdClass)#6707 (8) {
["id"]=>
string(1) "8"
["year"]=>
string(4) "1947"
["make"]=>
string(7) "Ferrari"
["model"]=>
string(5) "125 S"
["seats"]=>
string(1) "2"
["engine_type"]=>
string(1) "V"
["engine_i"]=>
string(3) "1.5"
["engine_cylinder"]=>
string(2) "12"
}
[1]=>
object(stdClass)#6708 (8) {
["id"]=>
string(1) "9"
["year"]=>
string(4) "1947"
["make"]=>
string(7) "Ferrari"
["model"]=>
string(5) "159 S"
["seats"]=>
string(1) "2"
["engine_type"]=>
string(1) "V"
["engine_i"]=>
string(3) "1.9"
["engine_cylinder"]=>
string(2) "12"
 }
}

如何在选择选项中填充这些字段，我编写的代码现在看起来像这样。

$('#cq-select-model').click(function () {
    $.ajax({
        url: "http://localhost/ferrari_hub/wp-admin/admin-ajax.php",
        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();
            for (var i in data) {
                $year.append('<option value=' + data[i].year + '>' + 
                data[i].year + '</option>');
                $make.append('<option value=' + data.data[i].make + '>' + 
                data.data[i].make + '</option>');
                $model.append('<option value=' + data[i].model + '>' + 
                data[i].model + '</option>');
            }
        }
    });
});

但它没有填充这些字段，有人可以帮我填充这些字段吗？这将是一个很大的帮助。

提前谢谢你。

Answer 1

试试这个。解析 JSON 格式的数据并进行处理。

   $.ajax({
            url: "http://localhost/ferrari_hub/wp-admin/admin-ajax.php",
            data: {action: 'getPopulateField'},
            type: 'GET',
            success: function (data) {
                var result = JSON.parse(data);
                console.log(result);
                var $year = $('#car-years');
                var $make = $('#car-makes');
                var $model = $('#car-models');
                $year.find('option').remove();
                $make.find('option').remove();
                $model.find('option').remove();
                for (var i in result) {
                    $year.append('<option value=' + result[i].year + '>' + 
                    result[i].year + '</option>');
                    $make.append('<option value=' + result[i].make + '>' + 
                    result[i].make + '</option>');
                    $model.append('<option value=' + result[i].model + '>' + 
                    result[i].model + '</option>');
                }
            }
        });

Answer 2

未经测试，但您可能可以使用Option 构造函数来创建选项，而不是连接字符串。 See here for details

模型使用data.data[i]，但其他模型使用data[i] ~ 看起来不一致，所以假设响应是json，也许这可能有用？

$('#cq-select-model').click(function () {
    $.ajax({
        url: "http://localhost/ferrari_hub/wp-admin/admin-ajax.php",
        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();

            for ( var n in data ) {
                var obj=data[ n ];

                $year.append( new Option( obj.year, obj.year ) );
                $make.append( new Option( obj.make, obj.make ) );
                $model.append( new Option( obj.model, obj.model ) );
            }
        }
    });
});