我正在用美国的城市动态填充一个选择标签。
根据用户选择的州，城市选择标签会动态填充该州的城市。城市的选项是通过一个 js 函数创建的，它可以很好地完成它的工作。在状态选择 html 标记内的“onchange”事件上调用此函数。
按照目前的工作方式，所有这些字段都在一个表单中。每个字段都必须是数据持久的，即您在这些字段中输入的数据必须在表单提交后“填写”。当前页面上的所有字段，除了动态填充的城市字段之外都是持久的并且按预期工作。这是通过以如下格式创建 CF 变量来完成的：
<cfparam name="form.highschoolstate" default="" />
<cfparam name="form.highschoolcity" default="" />
<cfparam name="form.highschool" default="" />
并且在每个输入中，格式类似于：
<select name="highschoolstate" id="highschoolstate" required="required" onchange="stateswitch('highschoolstate')" value="#form.highschoolstate#">
但是，表格中有一个问题，填充我的“高中城市”字段的城市不是数据持久的。对于每个州，我都有一个所有城市的列表，格式如下：
<option value=\"akiachak\">Akiachak</option>
但是当（请参见下图的结果）我尝试使用 innerHTML（通过替换 select 标记的内容）使数据持久化时，我得到了不受欢迎的代码。
<option value=\"akiachak\" <cfif form.highschoolcity EQ \"akiachak\">selected=\"selected\"</cfif>>Akiachak</option>
是否有一个选项可以将此条件 CF 语句放入我动态生成的 html 中，以便我可以在整个表单中拥有持久数据？
动态改变选择标签的函数：
//Dynamically changes the drop down list when selecting a city/state pair
function stateswitch(id)
{
var myId = id; //ID of the html element we are changing
var stateFlag = false; //This flag turns true when we have selected a state
var highschoolStateFlag = false; //This flag turns true when we have selected a highschool state
var indexInSelect; //Index selected in the select tag
var selectTag1; //Select tag # 1
var selectTag2; //Select tag # 2 that becomes available after select tag # 1 is selected
if(myId == "state")
{
indexInSelect = document.getElementById("state").selectedIndex;
selectTag1 = document.getElementById("state").options;
selectTag2 = document.getElementById("city");
state = selectTag1[indexInSelect].value;
if(selectTag1[0] == "") //If we haven't selected an option before
{
document.getElementById("state").remove(0); //remove the default/null case
stateFlag = true;
}
if(stateFlag)
indexInSelect = indexInSelect - 1; //accounts for offset of default case in indecees to select from
}
else
{
indexInSelect = document.getElementById("highschoolstate").selectedIndex;
selectTag1 = document.getElementById("highschoolstate").options;
selectTag2 = document.getElementById("highschoolcity");
document.getElementById("highschool").disabled = false;
document.getElementById("highschool").placeholder = "Required";
highschoolstate = selectTag1[indexInSelect].value;
if(selectTag1[0] == "") //If we haven't selected an option before
{
document.getElementById("highschoolstate").remove(0); //remove the default/null case
highschoolStateFlag = true;
}
if(highschoolStateFlag)
indexInSelect = indexInSelect - 1; //accounts for offset of default case in indecees to select from
}
selectTag2.disabled = false; //Disable the second select box (because we know at this point we have selected an option for the first one)
switch(selectTag1[indexInSelect].value)
{
case "alabama":
selectTag2.innerHTML="<option value=\"abbeville\" <cfif form.highschoolcity EQ \"abbeville\">selected=\"selected\"</cfif>>Abbeville</option><option value=\"abernant\" <cfif form.highschoolcity EQ \"abernant\">selected=\"selected\"</cfif>>Abernant</option>";
break;
case "ANOTHER_STATE":
selectTag2.innerHTML="etc...<option value=\"...</option>"
break;
//..
}
}
编辑 - 解决方案： 我试图做的事情是不可能的，所以我决定采用另一种方法