如何在使用JavaScript和Coldfusion的情况下填充动态创建的下拉框

Question

I have a dropdown box in a row that was dynamically created. I'm populating that box on within the screen. Is there a way that I can use cfquery to get the info from the sql server and populate the dropdown box. I would like to do it within the javascript?

Here is my code:

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

}

Answer 1

Well, if your page is a .cfm (I assumed it was), why not simply generating the whole select HTML using ColdFusion directly? Is there any special reason you want to avoid this?

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

However, if you want to pass a data structure from ColdFusion to JavaScript, it can be done using a data interchange format like JSON. Your JavaScript code could make an Ajax call to retrieve the data, or you could simply output the JSON directly in the page and make it accessible in the JS like this:

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

In that case, the optionsData JS variable would reference an object that contains your query's data. You can find more information about serializing queries here .

Answer 2

Another way is to use cfform and cfselect :

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

    ... etc
</cfform>

Answer 3

plalx's answer is good, but if you really want to do it in Javascript, you can simply do something like this:

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

You may also want to use ColdFusion's JSStringFormat function to prevent things like apostrophes within those values from the query causing any problems in your Javascript:

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

Answer 4

You can do as plalx mentioned or you can use the CFSELECT tag similar to this.

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