Create a data-persistent select option - html

Question

I am dynamically populating a select tag with cities in the US.
Depending on which state the user selects, a city select tag gets dynamically populated with cities from that state. The options for the city are created via a js function which does its job just fine. This function is called on the 'onchange' event within the state select html tag.
As it currently works, the entirety of these fields are within a form. Every field is required to be data-persistent, ie the data you type into these fields must be "filled out" after the form has been submitted. All fields currently on the page, except the dynamically filled city field are persistent and work as intended. This is accomplished by creating CF variables in a format like so:
<cfparam name="form.highschoolstate" default="" />
<cfparam name="form.highschoolcity" default="" />
<cfparam name="form.highschool" default="" />
and at each input, a format similar to this:
<select name="highschoolstate" id="highschoolstate" required="required" onchange="stateswitch('highschoolstate')" value="#form.highschoolstate#">
However, there is one kink in the form, the cities that populate my "High school city" field are not data-persistent. I have, for each state, a list of all of the cities in a format like so:
<option value=\"akiachak\">Akiachak</option>
But when (please see the below picture for result) I try to make the data-persistent, using innerHTML (by replacing the contents of the select tag) I get this code that is undesireable.
<option value=\"akiachak\" <cfif form.highschoolcity EQ \"akiachak\">selected=\"selected\"</cfif>>Akiachak</option>
Is there an option available to put this conditional CF statement within my dynamically generated html such that I can have persistent data throughout my entire form?
Function that dynamically changes the select tag:
//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;
//..
}
}
EDIT - SOLUTION:
What I was trying to do was not possible, so I decided on another approach

Answer 1

From the information that you provided I think the problem is with the \ character in the ColdFusion code. You need that to escape the quotation marks for the JavaScript code but not for the ColdFusion code. Try removing those characters from the <cfif> statements in the JavaScript code.
Instead of this:
<cfif form.highschoolcity EQ \"abbeville\">selected=\"selected\"</cfif>
Try this:
<cfif form.highschoolcity EQ "abbeville">selected=\"selected\"</cfif>
You do not need to escape the quotation marks in the ColdFusion code because the ColdFusion server will process that code before it is output to the user's browser.