如何根据用户在HTML选择中的选择更改字段?

时间:2010-12-20 21:52:22

标签: javascript coldfusion coldfusion-8

我有一个包含查询变量的选择列表

<tr>
  <td>County Name:</td>
    <td>
      <select name="countyName" onchange="countyID.value = countyName.value">
                <option>Select a County</option>
        <cfloop query = "getCounties">
        <option value="#countyName#" >#countyName#&nbsp;&nbsp;&nbsp;#countyID#</option>
        </cfloop>
    </select>
    </td>
</tr>

如何填写县ID字段?

<tr>
  <td>County ID:</td>
    <td><input type="Text" name="countyID">
     </td>
</tr>

我从未使用过jQuery。有没有办法只使用JavaScript?正如您所看到的,我尝试使用JavaScript,但我只能使用countyID填充countyName,我需要填充countyID

2 个答案:

答案 0 :(得分:5)

出于好奇,您为什么使用#countyName#作为选项的值?如果该县(错误地或没有)有一个引号或其他可能与您的HTML混淆的东西怎么办?

你为什么不这样做:

<select name="countyName" onchange="countyID.value = this.value">
    <option value="#countyID#">#countyName#</option>
</select>

答案 1 :(得分:3)

将其分解为一个适合您的功能: Live Example

<table>
    <tbody>
        <tr> <td>County ID:</td> <td><input id="countyId" type="Text" name="countyID"> </td> </tr>
        <tr> <td>County Name:</td> 

            <td> 
                <select name="countyName" onchange="update(this)">
                    <option>Select a County</option> 
                    <option value="1234">asdf</option> 
                    <option value="4321">asdf2</option> 
                </select> 
            </td>
        </tr>
    </tbody>
</table>
<script>
    function update( elem ) {
    document.getElementById('countyID').value = elem.value;
    }
</script>

或者简而言之就是改变

这样:

<select name="countyName" onchange="countyID.value = countyName.value">

这个,它应该工作

<select name="countyName" onchange="document.getElementById('countyId').value = this.value">

您需要通过document.getElementById()引用您的DOM元素,而不仅仅是他们的ID

<强> Another example here