Question

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

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

<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

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

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

Answer 2

试试这个：

<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'});
    }

在下拉列表中选择显示文本框

2 个答案: