如何在有对象时填充选择选项

时间:2018-01-17 08:44:25

标签: php jquery ajax database wordpress

我已经使用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"
 }
}

如何在se`lect选项中填充这些字段,我写的代码到目前为止看起来像这样。

$('#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>');
            }
        }
    });
});

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

提前谢谢。

2 个答案:

答案 0 :(得分: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>');
                }
            }
        });

答案 1 :(得分:1)

未经测试但您可以使用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 ) );
            }
        }
    });
});