jquery clone方法的问题

Question

function() {
            var driverUrl = ctx+"/transporter/drivers/free";
            var vehicleUrl = ctx+"/transporter/vehicles/free";

            var driverSelectBox = $("<select class=\"form-control input-lg required\">")
            .append("<option selected=\"true\">Select Driver</option>");
            $.getJSON(
                    driverUrl,
                    function(driverIds) {
                        $.each(driverIds, function(driver_index, driverId) {
                            driverSelectBox.append("<option value=\""+driverId+"\">"+driverId+"</option>");
                        });

                    });
            driverSelectBox.append("</select>");


            var vehicleSelectBox = $("<select class=\"form-control input-lg required\">")
            .append("<option selected=\"true\">Select Vehicle</option>");
            $.getJSON(
                    vehicleUrl,
                    function(vehicleIds) {
                        $.each(vehicleIds, function(vehicle_index, vehicleId) {
                            vehicleSelectBox.append("<option value=\""+vehicleId+"\">"+vehicleId+"</option>");
                        });

                    });
            vehicleSelectBox.append("</select>");


            console.log(driverSelectBox);
            console.log(vehicleSelectBox);


            $('ul#drivernvehicle').empty();
            var i = $('#noOfVehicle').val();
            var items = [];
            for (var j = 1; j <= i; j++) {
                var list_item = $("<li>")
                .append(driverSelectBox.clone())
                .append(vehicleSelectBox.clone())
                .append("</li>");
                items.push(list_item);
            }
            console.log(items);
            $('ul#drivernvehicle').append( items);
        });

此处正在正确填充选择框。我可以从console.log（）查看。但是当我创建列表元素并通过克隆选择框填充列表项时，在最后一个for循环内。然后是“项目”数组，其中我推送的项目数组不是由选项值填充的元素。不能回报这个问题。问题是没有克隆两个选择框的内部元素。为什么如此。是因为asynchronus i / o。在数据来自ajax调用之前正在执行该循环。