问创建数据持久化选择选项

EN

<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>

<option value=\"akiachak\" <cfif form.highschoolcity EQ \"akiachak\">selected=\"selected\"</cfif>>Akiachak</option>

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