Jquery 使用ajax创建“选择选项”后选择它

我有一个页面，有一系列相关的选择。除非有预先选择的选项，否则一切正常。如果我在代码中添加了警报，我可以将预选设置为有效，但如果没有警报，预选将不起作用

例如：

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

第二个有警告“是的”；在它的工作，但第一个没有

switchBatch是一个将ajax调用中的选项加载到batch select控件中的函数。两个实例都加载选项，但只有第二个实例选择了正确的选项

有什么建议吗

长矛

事情是这样的：

<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>

没有updateMax的代码，很难说到底发生了什么

---

您可以尝试的一种方法是，将updateMax附加到select控件的onchange侦听器，即$'selectID'.changeupdateMax，并执行$'selectID'.change，而不是调用updateMax

我认为预选择不起作用，因为switchBatch函数使用ajax。调用switchBatch之后的JavaScript代码在ajax调用完成之前执行，因此select元素为空。但是由于警报，它在第二个if块中工作，这给了ajax调用足够的时间来完成和填充select元素。

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

然后在success:callback中为switchBatch中的AJAX请求调用该函数

---

updateMax使用基于批选择的值设置只读文本输入。我不认为这是问题所在，因为除非出现警报，否则批选择不会更改。似乎不正确的行是：$'batch_2'.val'35'；这听起来很有可能，但我不确定如何暂停并等待ajax。有没有一种方法可以说，运行切换并等待完成，然后执行UpdateMax这就是ajax回调函数的目的，例如，成功。我建议您进行一些调试打印，即console.log。。。你可能会想出一个解决办法。谢谢帕特里克，你做到了。现在我必须弄清楚为什么笑

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
            }
        });
    }