Как заполнить динамически создаваемый выпадающий список с использованием JavaScript и Coldfusion

Question

У меня есть выпадающий список в строке, которая была создана динамически. Я заполняю это поле на экране. Есть ли способ, которым я могу использовать cfquery, чтобы получить информацию с сервера SQL и заполнить раскрывающийся список. Я хотел бы сделать это в рамках JavaScript?

Вот мой код:

<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

Ответ 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>

Answer 2

Что ж, если ваша страница имеет формат.cfm (я предполагал, что это так), то почему бы просто не сгенерировать весь выбранный HTML напрямую с помощью ColdFusion? Есть ли какая-то особая причина, по которой вы хотите этого избежать?

<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 будет ссылаться на объект, который содержит данные вашего запроса. Вы можете найти больше информации о сериализации запросов здесь.

Answer 3

Другой способ заключается в использовании cfform а также cfselect:

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

    ... etc
</cfform>

Answer 4

Вы можете сделать так, как упомянул plalx, ​​или использовать тег 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>