如何使用jQuery獲取select，然後設置select的值？

Question

我想使用jQuery的get函數來填充選擇（基於CF組件中的SQL查詢的結果）。填充工作正常，但是接下來我想在選擇填充後選擇正確的選項。嘗試使用done（），但似乎並不奏效。示例代碼：

function fChangeSelect() { 
    var txOutcomeSelect = ('#someSelect'); 
    $.get("#request.webroot#cfc/assessment.cfc?method=getEncCatChildrenRemote&encCatIdList=" + encCatIdList, 
        function(jsonText){ 
         var qryTxOutcomes = JSON.parse(jsonText); 

         //qryTxOutcomes is now an object with 2 arrays: COLUMNS and DATA. 
         //COLUMNS is an array of strings of the column names. 
         //DATA is an array of arrays, where each array is a row. 
         //Thus, every data cell is DATA[rownumber][columnnumber] 


         txOutcomeSelect.empty(); 
         txOutcomeSelect.append('<option value="">--Select an Outcome--</option>'); 
         $.each(qryTxOutcomes.DATA, function() { 
          txOutcomeSelect.append('<option value=' + $(this)[5] + '>' + $(this)[3] + '</option>'); 
         }); 
        } 
    ).done(function(){ 
     txOutcomeSelect.val('123');//does nothing, because select isn't populated yet. 
     alert('txOutcomeSelect should be populated by now, but its not. It only populated after I click OK on this alert.'); 
    }); 
} 

（更新）顯然它與ajax的時間無關。對於測試，我放入一個按鈕，該按鈕顯示帶有選項數量選項的警報。我等待頁面加載並選擇填充，然後單擊該按鈕，並且警報以「0」返回。因此，儘管select使用append（）填充，並且選項在屏幕上可見，但jQuery仍然認爲select是空的。

Answer 1

好吧，除了jQuery獲得，我不得不使用普通的舊javascript來清除/填充/選擇選項，現在select-option-after-ajax-runs功能起作用。

我確實最終不得不使用done（）來確保只有在完成ajax後才選擇正確的選項。我也最終不得不傳遞一個額外的參數來指示函數是否因頁面重載而被調用，因爲在頁面加載時以及主選擇更改時調用此函數。加載頁面時，根據另一個「主」選擇的值填充選擇內容，並且我希望所選選項與從數據庫中提取的內容匹配。當主控選擇更改時，我希望「副」選擇的選項可以更改，但不希望任何選項被預選。

所以，我的功能最終看起來像下面。有點環島;我很驚訝jQuery沒有更新，使這樣做是不必要的。

 //Using ajax to populate Treatment Outcome selects, based on selected Assessment Outcome 

     function fChangeTxOutcome(sel, bLoading) { 
      var id = sel.prop('id'); 
      var idNum = id[id.length-1]; 
      var txOutcomeSelect = document.getElementById('txOutcomeSelect' + idNum); 

      $.get("#request.webroot#cfc/assessment.cfc?method=getEncCatChildrenRemote", 
       function(jsonText){ 
        var qryTxOutcomes = JSON.parse(jsonText); 

        //qryTxOutcomes is now an object with 2 arrays: COLUMNS and DATA. 
        //COLUMNS is an array of strings of the column names. 
        //DATA is an array of arrays, where each array is a row. 
        //Thus, every data cell is DATA[rownumber][columnnumber] 

        //clear out any options first 
        for(var i=txOutcomeSelect.options.length-1; i>=0; i--) { 
         txOutcomeSelect.remove(i); 
        } 
        var firstOption = document.createElement('option'); 
        firstOption.setAttribute('value', ''); 
        firstOption.innerHTML = '--Select an Option--'; 
        txOutcomeSelect.appendChild(firstOption); 

        $.each(qryTxOutcomes.DATA, function() { 
         var thisOption = document.createElement('option'); 
         thisOption.setAttribute('value', $(this)[5]); 
         thisOption.innerHTML = $(this)[3]; 
         txOutcomeSelect.appendChild(thisOption); 
        }); 
       } 
      ).done(function(){ 
       if (bLoading) { 
        fmakeTxOutcomeSelected(txOutcomeSelect);      
       } 
      }) 
     }; 

     function fmakeTxOutcomeSelected(sel){ 
       var id = sel.id; 
       var idNum = id.charAt(id.length-1); 
       var arrOutcomeIds = []; 

       arrOutcomeIds[0] = ''; 
       arrOutcomeIds[1] = '#Get_cas.cEncOutcomeID#'; 
       arrOutcomeIds[2] = '#Get_cas.cEncOutcomeID2#'; 

       sel.value = arrOutcomeIds[idNum]; 
      }