CODEWITHSUNDEEP
javascriptcfmlcfquerycoldfusion-7
tnlewis
tnlewis

Reputation: 323

How to populate a dynamically created dropdown box in a using javascript and coldfusion

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

}

Upvotes: 0

Views: 1755

Answers (4)

Chris Pilie
Chris Pilie

Reputation: 451

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>

Upvotes: 0

duncan
duncan

Reputation: 31912

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>

Upvotes: 0

Dan Bracuk
Dan Bracuk

Reputation: 20804

Another way is to use cfform and cfselect:

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

    ... etc
</cfform>

Upvotes: 1

plalx
plalx

Reputation: 43718

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.

Upvotes: 2

Related Questions