自動填充輸入表單字段基於使用CF8從選擇框2個選擇或JS

Question

我是比較新的發展，並已作爲我的DBMS，處理和標記的ColdFusion 8 MSSQL '05主要工作。當用戶從下拉（選擇）菜單中設置某個選項時，我需要動態地填寫（簡單文本/輸入類型）字段。該值來自數據庫中的單個記錄。我發現，併成功地適應了這個代碼：在我的應用程序的情況下

http://jsfiddle.net/zunrk/

但是這隻適用於一維數組...，我需要或者二維數組或cfif或cfswitch代碼相當大的塊，這將打破DRY的基本規則之一此外，cfif代碼將不允許該領域的動態變化（不，我知道的，反正）

我寧願JS解決方案，因爲一）我使用它已是該位和B）想了解更多JS。我也對如何重新排列這些代碼（特別是設置數組元素）使其更加緊湊和可讀性的指針開放。我真的不是很喜歡w/JS，但是對於CF感覺相當有效。

我相信我已經包括了我的代碼，所有相關的部分，但如果你想看到更多，請讓我知道在一個答覆，我就回去取剩下公佈。先謝謝你，SOers！

PS：我想我應該解釋業務邏輯以及爲清晰起見。數據庫是在我開始創建之前構建的，並沒有考慮將「位置」和「類型」變量編入索引。我們的想法是，例如，用戶被傳導類型的頭髮「的測試（[3]）中的區域設置「西方」（[2]），並希望有「AMT」表單域填寫爲一旦他們進入這兩個標準。所以代碼應該將'amt'設置爲LOC [2] [3]，或者直接設置爲#rsf.phr#。

CODE：

<query name="rsf" datasource="test"> 
    SELECT * FROM fees WHERE company = '#trim(rsc.clientname)#' 
</cfquery> 

<script type="text/javascript"> 
    var LOC = new Array(6); 
    for (var i=0; i < 6; i++){ 
    LOC[i] = new Array(8); 
    } 

<cfoutput> 
    LOC[0][0] = ""; 
    LOC[0][1] = "#rsf.pua#"; 
    LOC[0][2] = "#rsf.pba#"; 
    LOC[0][3] = "#rsf.phr#"; 
    LOC[0][4] = "#rsf.pbld#"; 
    LOC[0][5] = "#rsf.pdna#"; 
    LOC[0][6] = "#rsf.ppt#"; 
    LOC[0][7] = "#rsf.pphy#"; 
    LOC[1][0] = ""; 
    LOC[1][1] = "#rsf.pua#"; 
    LOC[1][2] = "#rsf.pba#"; 
    LOC[1][3] = "#rsf.phr#"; 
    LOC[1][4] = "#rsf.pbld#"; 
    LOC[1][5] = "#rsf.pdna#"; 
    LOC[1][6] = "#rsf.ppt#"; 
    LOC[1][7] = "#rsf.pphy#"; 
    LOC[2][0] = ""; 
    LOC[2][1] = "#rsf.pua#"; 
    LOC[2][2] = "#rsf.pba#"; 
    LOC[2][3] = "#rsf.phr#"; 
    LOC[2][4] = "#rsf.pbld#"; 
    LOC[2][5] = "#rsf.pdna#"; 
    LOC[2][6] = "#rsf.ppt#"; 
    LOC[2][7] = "#rsf.pphy#"; 
    LOC[3][0] = ""; 
    LOC[3][1] = "#rsf.pua#"; 
    LOC[3][2] = "#rsf.pba#"; 
    LOC[3][3] = "#rsf.phr#"; 
    LOC[3][4] = "#rsf.pbld#"; 
    LOC[3][5] = "#rsf.pdna#"; 
    LOC[3][6] = "#rsf.ppt#"; 
    LOC[3][7] = "#rsf.pphy#"; 
    LOC[4][0] = ""; 
    LOC[4][1] = "#rsf.mpua#"; 
    LOC[4][2] = "#rsf.mpba#"; 
    LOC[4][3] = "#rsf.mphr#"; 
    LOC[4][4] = "#rsf.mpbld#"; 
    LOC[4][5] = "#rsf.mpdna#"; 
    LOC[4][6] = "#rsf.mppt#"; 
    LOC[4][7] = "#rsf.mpphy#"; 
    LOC[5][0] = ""; 
    LOC[5][1] = "#rsf.cpua#"; 
    LOC[5][2] = "#rsf.cpba#"; 
    LOC[5][3] = "#rsf.cphr#"; 
    LOC[5][4] = "#rsf.cpbld#"; 
    LOC[5][5] = "#rsf.cpdna#"; 
    LOC[5][6] = "#rsf.cppt#"; 
    LOC[5][7] = "#rsf.cpphy#"; 
</cfoutput> 

    function LOC(){ 
    x = document.getElementById("location"); 
    } 

    function CHOICE(){ 
    y = document.getElementById("type"); 
     document.getElementById("LOC").value = LOC[x.selectedIndex][y.selectedIndex]; 
    } 

</script> 



    <tr> 
    <td><br><b>Encounter Information:</b></td>  
    </tr> 
<cfoutput> 
    <tr><td style="vertical-align:top"> 

    CoC:<input type="text" name="coc" size="10" maxlength="20" value=""> 
    Auth. No.:&nbsp;<input type="text" name="auth" size="10" maxlenght="20" value=""> 
    Reason:<select name="reason" id="reason"> 
     <option value="Pre-Emp">Pre-Employment</option> 
     <option value="Random">Random</option> 
     <option value="Post Acc.">Post-Accident</option> 
     <option value="RTD">RTD(Return-to-Duty)</option> 
     <option value="Reason. Sus">Reasonable Suspicion</option> 
     <option value="Personal">Personal</option> </select> 
    Type:<select name="type" id="type" onChange="CHOICE();"> 
     <option value="0"></option> 
     <option value="1">UA</option> 
     <option value="2">BA</option> 
     <option value="3">Hair</option> 
     <option value="4">Blood</option> 
     <option value="5">DNA</option> 
     <option value="6">Paternity</option> 
     <option value="7">Physical</option></select><br> 
    Amt:$<input type="text" id="TP" name="amt"> 
    <form> 
     <input type="checkbox" name="obs" value="Y"><em>Observed</em> 
     <input type="checkbox" name="dot" value="Y"><em>DOT</em>  
    &nbsp;&nbsp;&nbsp;&nbsp;  
    Location:<select name="location" id="location" onChange="LOC();"> 
     <option value="0"></option> 
     <option value="1">Amidon</option> 
     <option value="2">West</option> 
     <option value="3">Tyler</option> 
     <option value="4">Mobile</option> 
     <option value="5">Callout</option></select> 

Answer 1

的ColdFusion已經寫了，你需要做到這一點所有的JavaScript。要訪問它，你可以在cfinput標籤中使用關鍵字「bind」。 documentation for cfinput會讓你開始。他們甚至有例子。