javascript - Jquery不 append html的特定部分

Question

我有以下代码:

let html = '<h2 class="text-center">Опции</h2>'
     html += '<div class="col-md-4 col-md-offset-4">'
        html += '<div class="form-group">'
           html += '<select name="options" id="options-select" class="form-control">'
              html += '<option value="">-- Изберете опция --</option>'
                 //for loop for options
                 for(product_option of data.options) {
                    for(product_option_value of product_option.product_option_value) {
                        $.ajax({
                            url: '<?= $get_option_link ?>&token=<?= $token ?>',
                            type: 'POST',
                            data: {option_value_id: product_option_value.option_value_id}
                        })
                        .done(function(option) {
                            option = JSON.parse(option)
                            console.log(product_option.name + ' - ' + option.name)
                            html += '<option value="'+product_option_value.product_option_value_id+'">'+ product_option.name + ' - ' + option.name +'</option>'
                        })
                        .fail(function() {
                            console.log("error")
                        })
                        .always(function() {
                            console.log("complete")
                        })
                    }
                }
            html += '</select>'
        html += '</div>'
    html += '</div>'

    $('#products').val('')

    if (data.options.length > 0) {
        $('#product-options').append(html)
    }

它会 append 除了 for 循环中的 html 之外的所有内容。我通过控制台记录了 objest 来检查它们，即使是 html += '<option...' 之前的 console.log 也都很好。部分工作正常，因此我确信循环中的代码已被处理。

编辑:加上检查器的控制台中没有错误

Answer 1

那是因为你调用 Ajax 异步函数，这意味着它将在稍后执行......在你的循环完成并且 html 变量已经设置之后......

尝试像这样改变你的ajax...

 $.ajax({
                        url: '<?= $get_option_link ?>&token=<?= $token ?>',
                        type: 'POST',
                        data: {option_value_id: product_option_value.option_value_id}
                    })
                    .done(function(option) {
                        option = JSON.parse(option)
                        console.log(product_option.name + ' - ' + option.name)
                        $('#options-select').append('<option value="'+product_option_value.product_option_value_id+'">'+ product_option.name + ' - ' + option.name +'</option>');
                    })