javascript - 使用 CF8 或 JS 根据选择框中的 2 个选择自动填充输入表单字段

Question

我对开发还比较陌生，主要使用 MSSQL '05 作为我的 DBMS，使用 ColdFusion 8 进行处理和标记。当用户从下拉(选择)菜单中设置某个选项时，我需要动态填写(简单文本/输入类型)字段。该值来自数据库中的单个记录。我找到并成功改编了这段代码:

http://jsfiddle.net/zunrk/

但是，这仅适用于一维数组...在我的应用程序上下文中，我需要一个二维数组或相当大的 cfif 或 cfswitch 代码块，这将违反一项基本规则，D.R.Y.另外，cfif 代码不允许动态更改字段(无论如何，据我所知)

我更喜欢 JS 解决方案，因为 a) 我已经在这方面使用它了，b) 想了解更多 JS。我也愿意接受有关如何重新排列此代码(特别是设置数组元素)以使其更加紧凑和可读的指示。我对 JS 还不太适应，但在 CF 方面我感觉相当有能力。

我相信我已经包含了代码的所有相关部分，但如果您希望查看更多内容，请在回复中告诉我，我将发布其余部分。提前谢谢你们，SOers!

PS:为了清楚起见，我想我还应该解释一下业务逻辑。该数据库是在我开始之前构建的，并且在设计时并未考虑对“位置”和“类型”变量进行索引。这个想法是，例如，用户正在区域设置“West”([2])进行“hair”类型([3])的测试，并希望将“amt”表单字段填写为一旦他们输入这两个标准。因此代码应将 'amt' 设置为 LOC[2][3] 或直接设置 #rsf.phr# 。

代码:

<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会让你开始。他们甚至有例子。