用ajax創建後選擇「select option」

Question

我有一個包含一系列「related」選項的頁面。除非有預選的選項，否則一切正常。如果我在代碼中添加了「警告」，但沒有它，則可以設置「預選」工作。

例如：

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調用）加載到批量選擇控件中的函數。兩個實例都會加載選項，但只有第二個選項會選擇正確的選項。

有什麼建議嗎？

蘭斯

這裏是整個事情：

<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請求之後嘗試運行的代碼的函數。

然後調用在success:回調AJAX請求該函數在switchBatch().

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 2

如果沒有updateMax()代碼，很難說什麼也正是回事。

一種方法，你可以嘗試是，附加updateMax()到onchange聽衆選擇控制（即$('#selectID').change(updateMax)）和，而不是調用updateMax()，做$('#selectID').change()。

Answer 3

我認爲預選不工作，因爲「switchBatch（）」函數使用ajax。調用「switchBatch（）」之後的JavaScript代碼在ajax調用完成之前執行，因此select元素爲空。但是它在第二個if塊中起作用，因爲alert（）給了ajax調用足夠的時間來完成並填充select元素。