选择“选择选项”使用 AJAX 创建后？

Question

我有一个页面，其中有一系列“相关”选择。一切正常，除非有一个预先选择的选项。如果我在代码中放置“警报”，我可以将“预选”设置为工作，但如果没有它，它就不起作用。

例如：

function loader(){
    if ($("#prod_1").val() > 0){
        switchBatch(1);
        $('#batch_1').val('15');
        updateMax(1);
    }
    if ($("#prod_2").val() > 0){
        switchBatch(2);
        alert('yup');
        $('#batch_2').val('35');
        updateMax(2);
    }
}
$(function() {
    loader();
});

第二个具有“alert('yup');”它有效，但第一个无效。

“switchBatch()”是一个将选项（来自 ajax 调用）加载到批量选择控件中的函数。两个实例都会加载选项，但只有第二个实例选择正确的选项。

有什么建议吗？

这是整个事情：

<script>
    maxVals = [];
    function switchBatch(idNum){
        maxVals = [];
        $("#max_"+idNum).val('');
        $.ajax({
            type: "POST",
            url: "/cfc/product.cfc?method=pialJson",
            data: ({
                productID: $("#prod_"+idNum).val()
            }),
            dataType: "json",
            success: function(result){
                options = '';
                var colMap = new Object();
                for(var i = 0; i < result.COLUMNS.length; i++) {
                    colMap[result.COLUMNS[i]] = i;
                }
                for (var i = 0; i < result.DATA.length; i++){
                    options += '<option value="' + result.DATA[i][colMap["BATCHID"]] + '">' + result.DATA[i][colMap["BATCHNAME"]]+ '</option>';
                    maxVals[i] = result.DATA[i][colMap["INSTOCK"]];
                }
                $("select#batch_"+idNum).html(options);
                updateMax(idNum);
            }
        });
    }
    function updateMax(idNum){
        thisOne = $("#batch_"+idNum).attr("selectedIndex");
        $("#max_"+idNum).val(maxVals[thisOne]);
        checkMax(idNum);
    }
    function checkMax(idNum){
        $("#qty_"+idNum).removeClass('red');
        if ($("#qty_"+idNum).val() > $("#max_"+idNum).val()){
            $("#qty_"+idNum).addClass('red');
        }
    }

    function loader(){
        if ($("#prod_1").val() > 0){
            switchBatch(1);
            alert('yup');
            $('#batch_1').val('<cfoutput>#batch_1#</cfoutput>');
            updateMax(1);
        }
        if ($("#prod_2").val() > 0){
            switchBatch(2);
            alert('yup');
            $('#batch_2').val('<cfoutput>#batch_2#</cfoutput>');
            updateMax(2);
        }
    }
    $(function() {
        loader();
    });
</script>

Answer 1

我认为预选择不起作用，因为“switchBatch()”函数使用ajax。调用“switchBatch()”之后的 JavaScript 代码在 ajax 调用完成之前执行，因此 select 元素为空。但由于alert()，它在第二个 if 块中起作用，它为 ajax 调用提供了足够的时间来完成并填充 select 元素。

Answer 2

让您的 switchBatch() 函数接受另一个参数，该参数是一个包含您在 AJAX 请求后尝试运行的代码的函数。

然后在 success: 回调中为 switchBatch() 中的 AJAX 请求调用该函数。

function loader(){
    if ($("#prod_1").val() > 0) {
        switchBatch(1, function() {
            $('#batch_1').val('15');
            updateMax(1); // right now this is being called in switchBatch() as well
        }
        );
    }
    if ($("#prod_2").val() > 0) {
        switchBatch(2, function() {
            $('#batch_2').val('35');
            updateMax(2);  // right now this is being called in switchBatch() as well
        }
        );
    }
}

  // function argument -------v
function switchBatch(idNum, func){
        maxVals = [];
        $("#max_"+idNum).val('');
        $.ajax({
            type: "POST",
            url: "/cfc/product.cfc?method=pialJson",
            data: ({
                productID: $("#prod_"+idNum).val()
            }),
            dataType: "json",
            success: function(result){
                options = '';
                var colMap = new Object();
                for(var i = 0; i < result.COLUMNS.length; i++) {
                    colMap[result.COLUMNS[i]] = i;
                }
                for (var i = 0; i < result.DATA.length; i++){
                    options += '<option value="' + result.DATA[i][colMap["BATCHID"]] + '">' + result.DATA[i][colMap["BATCHNAME"]]+ '</option>';
                    maxVals[i] = result.DATA[i][colMap["INSTOCK"]];
                }
                $("select#batch_"+idNum).html(options);

                  // call the function that was passed in
                func.call(null);
                updateMax(idNum); // updateMax is being called in the function that is
                                  //   passed in. You probably don't need it in both places
            }
        });
    }

Answer 3

如果没有 updateMax() 代码，很难说到底发生了什么。

您可以尝试的一种方法是将 updateMax() 附加到选择控件的 onchange 侦听器（即 $('#selectID').change(updateMax)），而不是调用 updateMax()，而是执行 $('#selectID').change()。