Question

我尝试使用jQuery的get函数来填充select（基于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的时间无关。为了进行测试，我放入了一个按钮，该按钮显示带有选择数量选项的警报。我等待页面加载和选择填充，然后单击按钮，警报返回＆＃34; 0＆＃34;。因此，即使select正在使用append（）填充，并且选项在屏幕上可见，jQuery仍然认为select是空的。

Answer 1

好的，除了jQuery get之外，我不得不使用普通的旧javascript清除/填充/选择select的选项，现在select-option-after-ajax-runs功能正常工作。

我最终不得不使用done（）来确保只在ajax完成后才选择正确的选项。我还最终必须传递一个额外的参数来指示是否因为页面重新加载而调用该函数，因为在页面加载和主选择更改时都会调用此函数。页面加载时，将根据另一个＆＃34; master＆＃34;的值填充select。选择，我希望所选的选项与从数据库中提取的内容相匹配。当主选择更改时，我想要＆＃34; sub＆＃34;的选项。选择更改，但不要预先选择任何选项。

所以，我的功能最终看起来如下所示。一个小环形交叉口;我很惊讶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];
            }

如何用jQuery get填充select，然后设置select的值？

1 个答案: