Html 创建一个数据持久选择选项

我正在用美国的城市动态填充select标记

根据用户选择的州，城市选择标记将动态填充来自该州的城市。城市的选项是通过一个js函数创建的，它可以很好地完成任务。在state select html标记内的“onchange”事件上调用此函数

在当前工作时，所有这些字段都在一个表单中。每个字段都必须是数据持久性的，即您在这些字段中键入的数据必须在表单提交后填写。当前页面上的所有字段（动态填充的城市字段除外）都是持久的，并按预期工作。这是通过以下格式创建CF变量来实现的：

<cfparam name="form.highschoolstate" default="" />
<cfparam name="form.highschoolcity" default="" />
<cfparam name="form.highschool" default="" />

<option value=\"akiachak\">Akiachak</option>

在每次输入时，格式类似于：

<select name="highschoolstate" id="highschoolstate" required="required" onchange="stateswitch('highschoolstate')" value="#form.highschoolstate#">

然而，表单中有一个纠结，填充我的高中城市字段的城市不是数据持久性的。对于每个州，我都有一份所有城市的列表，格式如下：

<cfparam name="form.highschoolstate" default="" />
<cfparam name="form.highschoolcity" default="" />
<cfparam name="form.highschool" default="" />

<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;
//..
}
}

编辑-解决方案：

---

我试图做的是不可能的，因此根据您提供的信息，我决定采用另一种方法，我认为问题在于ColdFusion代码中的\字符。您需要它来转义JavaScript代码的引号，而不是ColdFusion代码的引号。尝试从JavaScript代码中的语句中删除这些字符

与此相反：

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

试试这个：

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

---

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

我猜，因为您没有共享javascript，所以您的javascript代码中插入了条件。那是行不通的；javascript=client，cfif=coldfusion服务器。您能否包含使用innerHTML的javascript代码，以便我们可以查看一下？感谢您添加额外的代码。我仍然看不到代码被插入到哪里？@Miguel-F，代码已经添加到示例中。您不能使用JavaScript添加ColdFusion代码并期望它被执行。有更简单的方法来完成您的尝试。您是否将州和城市存储在数据库中？编辑：取消反斜杠不会提前结束我在函数中的语句吗？不，很抱歉，此解决方案不起作用。函数本身在一个js文件中，按照您的建议提前结束了代码行。问题是js文件中有ColdFusion代码。默认情况下，ColdFusion不处理JS文件。您需要ColdFusion服务器在将CF代码传递给客户端之前对其进行处理。您没有理解CF代码运行时和JS代码运行时的区别。