如何摆脱jquery错误

Below is my full code, its basic, you select a country and it shows, or hides the correct form underneath, problem is it gives an error

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

"getState" is not define

“getState”未定义

Now I am a total noob at this but how do you debug these kind of errors?

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

<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>

****UPDATED CODE PARTIALLY WORKING****

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

<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 个解决方案

#1

You haven't named your function getState.... it doesn't know where to go to find the definition of the function "getState"!

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

also you have not set up your events correctly... should look like this:

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

<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>

you may also need to remove the "onChange" from the select tag as the other poster mentioned. in jQuery, you don't actually set the events in the HTML (a benefit!), you just bind the events to elements based on their tag, id, or CSS class.

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

EDIT: I've noticed you're using name="country" instead of id="country" or class="country"... this will prevent you from making proper selections

编辑:我注意到你使用的是name =“country”而不是id =“country”或class =“country”...这会阻止你做出正确的选择

#2

I think you just need to remove the onchange="getState(this.value)" attribute from your select tag, since the getState JavaScript function is no longer needed/being used.

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

#3

You should remove the call to getState in your select element. Also, I noticed that in your script you're referencing the names of the elements as if they are IDs. You should either change your name attributes to id attributes, or use selectors like "select[name='country']".

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

#1