如何摆脱jquery错误

时间:2009-07-27 19:29:17

标签: jquery ajax

下面是我的完整代码,它是基本的,你选择一个国家并显示,或隐藏下面的正确表单,问题是它给出了错误

“getState”未定义

现在我是一个总菜鸟,但你如何调试这些错误呢?

<form method="post" name="form1"> 
   <select style="background-color: #ffffa0" name="country" onchange="getState(this.value)"> 
      <option>Select Country</option> 
      <option value="223">USA</option> 
      <option value="224">Canada</option> 
      <option value="225">England</option> 
      <option value="226">Ireland</option> 
   </select> 

   <select style="background-color: #ffffa0" name="state"> 
      <option>Select Country First</option> 
   </select> 

   <input type="text" name="othstate" value="" class="textBox" style="display: none;"> 
</form> 

<script> 
$(function() { 
    $('#country').change( function() { 
        var val = $(this).val(); 
        if (val == 223 || val == 224) { 
            $('#othstate').val('').hide(); 
            $.ajax({ 
               url: 'findState.php', 
               dataType: 'html', 
               data: { country : val }, 
               success: function(data) { 
                   $('#state').html( data ); 
               } 
            }); 
        } 
        else { 
           $('#state').val('').hide(); 
           $('#othstate').show(); 
        } 
    }); 
}); 
</script>

****更新代码部分工作****

<script>
$(document).ready(function() {
   getState();
});

function getState() {
    $('#country').change( function() {         
        var val = $(this).val();
     if (val == 223) {
         $('#state').val('').show();
         $('#othstate').hide();
     }else {
        $('#state').val('').hide();
        $('#othstate').show();
     }
   });
 }
</script>

<form method="post" name="form1">
   <select style="background-color: #ffffa0" name="country" id="country">
      <option>Select Country</option>
      <option value="223" selected="selected">USA</option>
      <option value="224">Canada</option>
      <option value="225">England</option>
      <option value="226">Ireland</option>
   </select>
<div id="state">
   <select style="background-color: #ffffa0" name="state" id="state">
      <option>Select State</option>
      <option value="1">Florida</option>
      <option value="2">New York</option>
      <option value="3" selected="selected">Georgia</option>
      <option value="4">California</option>
   </select>
</div>
<div id="othstate"><input type="text" name="othstate" id="othstate" value="" class="textBox"></div>
</form>

3 个答案:

答案 0 :(得分:3)

我认为您只需要从select标记中删除 onchange =“getState(this.value)”属性,因为不再需要/正在使用getState JavaScript函数。

答案 1 :(得分:3)

你还没有命名你的函数getState ....它不知道去哪里找到函数“getState”的定义!

你还没有正确设置你的活动......应该是这样的:

<script>
$(document).ready(function() {
   getState();
});

function getState() {
    $('#country').change( function() {         
        var val = $(this).val();
        if (val == 223 || val == 224) {
         $('#othstate').val('').hide();
         $.ajax({
            url: 'findState.php',
            dataType: 'html',
            data: { country : val },
            success: function(data) {
                $('#state').html(data);
            }
         });
     }else {
        $('#state').val('').hide();
        $('#othstate').show();
     }
   });
 }
</script>

您可能还需要从select标记中删除“onChange”,如其他海报所述。在jQuery中,你实际上并没有在HTML中设置事件(一个好处!),你只需根据它们的标签,id或CSS类将事件绑定到元素。

编辑:我注意到您使用的是name="country"而不是id="country"class="country" ...这会阻止您做出正确的选择< / p>

答案 2 :(得分:0)

您应该在select元素中删除对getState的调用。此外,我注意到在您的脚本中,您引用元素的名称,就好像它们是ID一样。您应该将名称属性更改为id属性,或使用"select[name='country']"等选择器。

相关问题