創建數據持久性選擇選項

Question

我在美國的城市動態填充選擇標籤。

根據用戶選擇哪種狀態，城市選擇標籤會動態地填充來自該州的城市。這個城市的選擇是通過一個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（通過替換選擇標記的內容）我得到這個代碼是不可取的。

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

---

---

是否有可用的選項，把我的動態生成的HTML的這個條件CF聲明，這樣我可以有持續性數據貫穿我的整個形式？

---

---

---

功能動態改變選擇標籤：

//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服務器將處理代碼之前，它是輸出到用戶的瀏覽器。