除非您在每次选择后重新提交页面并重新查询依赖的下拉值，否则您必须使用某种客户端 js 和/或 ajax。
我认为这就是你想表明你正在做的事情？不太清楚你想做什么；您是否希望依赖的下拉列表反映您选择的内容并自动更改？
因此，您需要根据他们选择和提交的内容，对所有可能的下拉列表进行大的 if 包装吗？为什么用户一次只能选择其中一项？这看起来是一种非常麻烦的编码方式，而且接口也很麻烦。
这将向您展示如何使用cfselect，但我认为你想如何做到这一点仍然有点奇怪。你打算保存每件作品并展示它还是在某个地方使用它？或者这只是一个概念证明？
我可能会一直展示所有的东西。依赖下拉列表对于汽车选择器（年份、品牌、型号、装饰级别）等内容更有意义，其中每个选择器都唯一依赖于先前的值。我不确定您想从您提出的问题中找出什么内容。
无论如何，ColdFusion 确实有一个<cfselect>它会自动为你连接起来，尽管我个人只会使用 jQuery/Ajax。
以下是使用标签执行此操作的方法：
1) 不要在更改时提交表单。
2) 使用 cfselect 将下拉列表连接在一起。
3) 您需要有方法来调用可远程访问的查询，以使绑定正常工作。
<cfif isDefined('Form.DropDownOne')>
<!--- Do some action here --->
<cfdump var="#form#">
</cfif>
<cfform>
<label>Select A Report</label>
<cfselect name="dropDownOne" id="dropDownOne" required="yes"
<!--- The display attribute will map the "name" column to the option display text area --->
<!--- The value attribute will map "value" column to the option value (what is submitted)--->
display='name ' value='value'
<!--- The cfc should send back a query with name and value columns. --->
<!--- The dot path should point to the location of the cfc. --->
bind="cfc:com.app.code.myDropDowns.getCategories()" bindonload="true">
<option>Select Report Type</option>
</cfselect>
<label>Select A Value</label>
<cfselect name="dropDownTwo" id="dropDownTwo" required="yes"
display='name' value='value'
<!--- This method takes the value from the other drop down. --->
<!--- CF uses {} to denote the binding of the element to pass through. --->
<!--- This binding will occur automatically on any change to the dropDownOne element (including load). --->
bind="cfc:com.app.code.myDropDowns.getDetails({dropDownOne})" >
<option>Stuff</option>
</cfselect>
<input type="Submit" name="Continue" value="Continue">
</cfform>
在这里，我制作了一个 myDropDowns.cfc ，它将返回一个手动构建的查询（我不知道您如何/在哪里存储数据，所以根据您的喜好换成真正的查询，只需返回一个查询到请求：
component output="false" persistent="false" displayname="myDropDowns" {
structAppend(variables, Application.Seq.Objects.oCore.injectCoreMethods() );
remote function getCategories() {
var q = queryNew('');
queryAddColumn(q,'name',['Select Report Type','Color','ID', 'Officer', 'School']);
queryAddColumn(q,'value',['Select Report Type','Colors','IDs', 'Officers', 'Schools']);
return q;
}
remote function getDetails(required string Category) {
var q = queryNew('');
if(Arguments.Category == 'Colors' ) {
queryAddColumn(q,'name',['Select Value','Red','Green','Blue', 'Yellow', 'Purple']);
queryAddColumn(q,'value',['','Red','Green','Blue', 'Yellow', 'Purple']);
} else if(Arguments.Category == 'IDs' ) {
queryAddColumn(q,'name',['Select Value','123','456','789', '1011', '978']);
queryAddColumn(q,'value',['','123','456','789', '1011', '978']);
} else if(Arguments.Category == 'Officers' ) {
queryAddColumn(q,'name',['Select Value','Johnson','Fredricks','Oppenheimer', 'Davis', 'Smith']);
queryAddColumn(q,'value',['','Johnson','Fredricks','Oppenheimer', 'Davis', 'Smith']);
} else if(Arguments.Category == 'Schools' ) {
queryAddColumn(q,'name',['Select Value','Central','Northridge','Fairview', 'Daring', 'South']);
queryAddColumn(q,'value',['','CJH','NRJH','FHS', 'DHS', 'SHS']);
} else {
queryAddColumn(q,'name',['Select A Report Type First']);
queryAddColumn(q,'value',['Yeah, do that']);
}
return q;
}
}
这里有几个封装在 cat/list 方法中的查询，您可以修改它们以指向您的表，这些查询应返回与手动编码的查询相同的样式。当然，替换您的database.tablename和列名。
remote function getCats() {
var q = queryNew(''); // Create empty query, not really nec. Just to initiate as query type.
var oQ = new Query(); // Create query object to execute query against your DB
try { // I like to use try-catches, make it easier to figure out what is going on sometimes....
/* You don't have to set the datasource if you set it in the Application for CF9+*/
oQ.setDataSource('myDataSource');
// Query name is only really needed if caching or requerying as it becomes part of your cache signature
oQ.setName('qMyQueryCategories');
oQ.setCachedWithin(1); // 1 == 1 day/24 hours, .5 = 12 hours, etc)
oQ.setSQL("
SELECT
T1.Id,
T1.DisplayName AS Name,
T1.Category AS Value
FROM yourDB.yourCatTableHere T1
");
q = oQ.Execute().getResult();
return q;
} catch (any err) {
/*
* Returning the error will allow you to debug in the case you have a bad query.
* You can see the result in your F12 debug network tool.
* You could optionally call an error handler to log/email the error
* but then return the empty query to the UI request so it sort of keeps functioning...
* */
return err;
}
}
remote function getList(required string Category) {
var q = queryNew('');
var oQ = new Query();
try {
oQ.setName('qMyQuery#Arguments.Category#');
oQ.setCachedWithin(.04); // Approximately 1 hour (1/24=.0417)
oQ.setSQL("
SELECT
T1.Id,
T1.Category AS Cat,
T1.DisplayName AS Name,
T1.ValueKey AS Value
FROM [yourDB.yourDetailTableNameHere] T1
WHERE T1.Category = ? ;
");
// Parameterize your sql variable. CF will take care of quoting it properly, etc.
oQ.AddParam(value=Arguments.Category, cfsqltype='CF_SQL_VARCHAR' );
q = oQ.Execute().getResult();
return q;
} catch (any err) {
return err;
}
}
只需确保您在绑定中调用的方法名称与您为每个方法使用的方法名称相匹配即可。
