如何在使用javascript和coldfusion中填充動態創建的下拉框

我在動態創建的行中有一個下拉框。我正在屏幕上填充該框。有沒有一種方法可以使用cfquery從sql server獲取信息並填充下拉框。我想在JavaScript內做到這一點？如何在使用javascript和coldfusion中填充動態創建的下拉框

這裏是我的代碼：

<script language="javascript" type="text/javascript"> 
function addRow() { 

    var tbl = document.getElementById('tblSample'); 
    var lastRow = tbl.rows.length; 
    var iteration = lastRow; 
    var row = tbl.insertRow(lastRow); 

    // left cell 
    var cellLeft = row.insertCell(0); 
    var textNode = document.createTextNode(iteration-3); 
    cellLeft.appendChild(textNode); 

     // select cell 
    var cellRightSel = row.insertCell(1); 
    var sel = document.createElement('select'); 
    sel.name = 'sectCode' + iteration; 
    sel.id = 'sectCode' + iteration;  
    sel.options[0] = new Option('---Any---', '0'); 
    sel.options[1] = new Option('Level 0.5: test1, '1'); 
    sel.options[2] = new Option('Level I: test2', '2'); 
    sel.options[3] = new Option('Level I.D: test3', '3'); 
    sel.options[4] = new Option('Level II.1: test4', '4'); 
    sel.options[5] = new Option('Level II.5: test5', '5'); 
    cellRightSel.appendChild(sel); 

}

來源

2013-03-30 tnbumbray

使用javascript做它可能是在Coldfusion頁面中填充下拉框的最困難的方式。你打開更容易的方法來做到這一點？ –

我打開一個更簡單的方法。 – tnbumbray

plalx的回答是好，但如果你真的想這樣做在Javascript中，你可以簡單地做這樣的事情：

sel.options[0] = new Option('---Any---', '0'); 
<cfoutput query="yourQuery"> 
    sel.options[#yourQuery.CurrentRow#] = new Option('#yourQuery.value#', '#yourQuery.text#'); 
</cfoutput>

您可能還希望使用ColdFusion的JSStringFormat函數來防止在查詢的那些值中引起類似撇號的問題，從而導致Javascript中的任何問題：

sel.options[0] = new Option('---Any---', '0'); 
<cfoutput query="yourQuery"> 
    sel.options[#yourQuery.CurrentRow#] = new Option('#JSStringFormat(yourQuery.value)#', '#JSStringFormat(yourQuery.text)#'); 
</cfoutput>

來源

2013-03-30 20:30:32 duncan

謝謝。它工作得很好。 – tnbumbray

好吧，如果你的頁面是一個.CFM（我認爲這是），爲什麼不乾脆直接生成使用ColdFusion整個選擇HTML？你有什麼特別的理由想避免這種情況？

<select name="test"> 
    <cfoutput query="yourQuery"> 
     <option value="#yourQuery.value#">#yourQuery.text#</option> 
    </cfoutput> 
</select>

但是，如果你想通過從ColdFusion的給JavaScript的數據結構，可以使用像JSON數據交換格式來完成。 JavaScript代碼可以使一個Ajax調用來檢索數據，或者你在頁面可以簡單地輸出JSON直接並使其在這樣的JS訪問：

<script> 
    var optionsData = <cfoutput>#serializeJson(yourQuery)#</cfoutput>; 
</script>

在這種情況下，optionsData JS變量將引用包含查詢數據的對象。你可以找到關於序列化查詢的更多信息here。

來源

2013-03-30 13:59:15 plalx

我正在使用ColdFusion7，所以我不認爲我可以使用JSON。 – tnbumbray

有一個名爲[JSONUtil]（http://jsonutil.riaforge.org/）的項目可以幫助你。 – plalx

另一種方法是使用cfform和cfselect：

<cfform> 
    <cfselect name="something" 
       query="yourquery" 
       value="AFieldFromTheQuery" 
       display="AnotherFieldFromTheQuery"> 

    ... etc 
</cfform>

來源

2013-03-30 14:34:35

這將適用於初始列表，但它們也在飛行中向DOM添加新列表。 – Leigh

您可以按照提及的方式進行操作，也可以使用類似於此的CFSELECT標記。

<!--- Get data ---> 
    <CFQUERY DATASOURCE="datasource" NAME="qData"> 
    SELECT fieldname, ID 
    FROM qTable 
    ORDER BY ID 
    </CFQUERY> 

    <cfform> 
    <CFSELECT NAME="name" 
    query="qData" 
    display="fieldname" 
    width="250" 
    value="ID"><option value="" selected="selected">default value</option></CFSELECT> 
    </cfform>

來源

2013-03-31 22:17:58

是的，[丹已經建議使用'cfselect']（http://stackoverflow.com/a/15719662/104223）。但正如評論中提到的，它沒有解決原始問題：如何使用* javascript *添加和填充其他選擇列表。 – Leigh

如何在使用javascript和coldfusion中填充動態創建的下拉框

回答

相關問題