如何使用javascript和coldfusion在中填充动态创建的下拉框
我在动态创建的行中有一个下拉框。我在屏幕上填充那个框。是否有一种方法可以使用cfquery从sql server获取信息并填充下拉框。我想在javascript中实现它 这是我的密码:如何使用javascript和coldfusion在中填充动态创建的下拉框,javascript,cfml,cfquery,coldfusion-7,Javascript,Cfml,Cfquery,Coldfusion 7,我在动态创建的行中有一个下拉框。我在屏幕上填充那个框。是否有一种方法可以使用cfquery从sql server获取信息并填充下拉框。我想在javascript中实现它 这是我的密码: <script language="javascript" type="text/javascript"> function addRow() { var tbl = document.getElementById('tblSample'); var lastRow = tbl.ro
<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);
}
好吧,如果您的页面是一个.cfm(我假设是),为什么不直接使用ColdFusion生成整个select 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>
sel.options[0] = new Option('---Any---', '0');
<cfoutput query="yourQuery">
sel.options[#yourQuery.CurrentRow#] = new Option('#yourQuery.value#', '#yourQuery.text#');
</cfoutput>
在这种情况下,optionsdatajs变量将引用包含查询数据的对象。您可以找到有关序列化查询的更多信息。好吧,如果您的页面是.cfm(我假设是),为什么不直接使用ColdFusion生成整个select 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>
sel.options[0] = new Option('---Any---', '0');
<cfoutput query="yourQuery">
sel.options[#yourQuery.CurrentRow#] = new Option('#yourQuery.value#', '#yourQuery.text#');
</cfoutput>
在这种情况下,optionsdatajs变量将引用包含查询数据的对象。您可以找到有关序列化查询的更多信息。另一种方法是使用cfform和cfselect:
另一种方法是使用cfform和cfselect:
plalx的答案很好,但如果您真的想用Javascript实现,您可以简单地执行以下操作:
<script>
var optionsData = <cfoutput>#serializeJson(yourQuery)#</cfoutput>;
</script>
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>
plalx的答案很好,但如果您真的想用Javascript实现,您可以简单地执行以下操作:
<script>
var optionsData = <cfoutput>#serializeJson(yourQuery)#</cfoutput>;
</script>
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>
您可以按照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>
您可以按照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>
使用javascript可能是在coldfusion页面中填充下拉框最困难的方法。你愿意接受更简单的方法吗?我愿意接受更简单的方法。使用javascript可能是在coldfusion页面中填充下拉框最困难的方法。你愿意接受更简单的方法吗?我愿意接受更简单的方法。我正在使用ColdFusion7,因此我认为我不能使用JSON。有一个名为ColdFusion7的项目可以帮助你实现这一点。我正在使用ColdFusion7,因此我认为我不能使用JSON。有一个名为ColdFusion7的项目可以帮助你实现这一点。这将适用于初始列表,但他们也在动态地向DOM添加新列表。这对初始列表有效,但他们也在动态地向DOM添加新列表。是的。但正如评论中提到的,它并没有解决最初的问题:如何用javascript添加和填充额外的选择列表。但正如评论中提到的,它并没有解决最初的问题:如何使用javascript添加和填充其他选择列表。