创建数据持久性选择选项

Question

我正在动态填充美国城市的选择标记。

根据用户选择的状态，城市选择标记会动态填充来自该州的城市。城市的选项是通过js函数创建的，它可以很好地完成工作。在state select 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;
//..
}
}

编辑 - 解决方案： 我试图做的事情是不可能的，所以我决定采用另一种方法

Answer 1

根据您提供的信息，我认为问题出在ColdFusion代码中的\字符。您需要它来转义JavaScript代码的引号，而不是ColdFusion代码的引号。尝试从JavaScript代码中的<cfif>语句中删除这些字符。

而不是：

<cfif form.highschoolcity EQ \"abbeville\">selected=\"selected\"</cfif>

试试这个：

<cfif form.highschoolcity EQ "abbeville">selected=\"selected\"</cfif>

您不需要转义ColdFusion代码中的引号，因为ColdFusion服务器会在将代码输出到用户的浏览器之前处理该代码。