javascript 및 coldfusion을 사용하여 동적으로 생성 된 드롭 다운 상자를 채우는 방법

Question

동적으로 생성 된 행에 드롭 다운 상자가 있습니다. 화면 안에 그 상자를 채우고 있습니다. cfquery를 사용하여 SQL 서버에서 정보를 가져 와서 드롭 다운 상자를 채울 수있는 방법이 있습니까? 나는 자바 스크립트 내에서 그것을하고 싶습니다? 여기

내 코드입니다 :

<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의 대답은 좋지만, 당신이 정말로 자바 스크립트를 수행하려는 경우, 당신은 단순히 같은 것을 수행 할 수 있습니다

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

을

ColdFusion의 JSStringFormat 함수를 사용하여 JavaScript에서 문제를 일으키는 쿼리의 값 내에 아포스트로피와 같은 것을 방지 할 수도 있습니다.

Answer 2

글쎄, 페이지가 .CFM (나는 그것이 가정)을, 왜 단순히 직접 ColdFusion에서를 사용하여 전체 선택 HTML을 생성하지 않은 경우? 이것을 피하기 위해 특별한 이유가 있습니까? 당신은 자바 스크립트 ColdFusion에서의 데이터 구조를 전달하려면

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

그러나, 그것은 JSON과 같은 데이터 교환 형식을 사용하여 수행 할 수 있습니다. 자바 스크립트 코드는 데이터를 검색하기 위해 Ajax 호출을 만들 수있는, 또는 당신은 페이지에서 직접 JSON 간단하게 출력 할 수 있었던이 같은 JS에 액세스 할 수 있도록 :이 경우

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

의 optionsData JS 변수 것 쿼리 데이터가 들어있는 객체를 참조합니다. 쿼리를 serialize하는 방법에 대한 자세한 내용은 here을 참조하십시오.

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>