在下拉选择中显示文本框

Question

我尝试过 onchange 和 onclick 事件，但我都遇到了问题。执行我的代码时，Firebug 告诉我我的 showTextBox 函数没有定义。

当状态下拉列表选择值 1 时，我需要显示包含文本框的 <div>。我在选项标签中移动了 onclick 属性并尝试了 onchange 属性，但仍然得到 showTextBox() 未在 Firebug 中定义。

<select id="AddrType" onclick="showTextBox();"
        height="30px" style="width: 90px"> 
  <option value="10"></option>
  <option value="0">City</option>
  <option value="1">State</option>
  <option value="2">Zip</option>
</select>   

 <br />

 <div id="stateText" style="visibility: hidden">
   State <input type="text" id="STATE"/>
 </div>

这是触发 onclick 或 onchange 事件时调用的函数：

function showTextBox() {
    console.log("in check Drop down");
    if ($('#AddrType').val() == 'State') {
        $('#stateText').style.visibility = 'visible';
    }
    console.log($('#AddrType').val());

对此有任何帮助。我用谷歌搜索了它，但我似乎找不到有用的东西。我无法使用document.getElementById() 函数。

Answer 1

试试这个：

<script type='text/javascript'>

  $(document).ready(function(){
       $('#AddrType').change(function(){
           if ($(this).val() == '1') {
               $('#stateText').css({'display':'block'});           
           }
        });
  });


</script>

并将您的选择更新为：

   <select id="AddrType" height="30px" style="width: 90px"> 
     <option value="10"></option>
     <option value="0">City</option>
     <option value="1">State</option>
     <option value="2">Zip</option>
  </select>   

另外，这工作得很好。

   <select id="AddrType"  onchange="showTextBox()" height="30px" style="width: 90px"> 
      <option value="10"></option>
      <option value="0">City</option>
      <option value="1">State</option>
      <option value="2">Zip</option>
  </select>

showTextBox() 在哪里：

   function showTextBox(){
        if ($('#AddrType').val() == '1') {
                   $('#stateText').css({'visibility':'visible'});
    }

Answer 2

您的 val() 可能返回 "1" 而不是您正在检查的 "State"。

不仅在 jQuery 上，而且当您将表单数据发布到服务器时，AddrType 的值将是所选 option 元素的 value 属性（在您的情况下为“City / State / Zip”只是值的“标题”）。