2009-07-27 111 views
1

下面是我完整的代碼,它的基本的,你選擇一個國家和它顯示或隱藏下方的正確形式,問題是,它提供了一個錯誤如何擺脫jQuery的錯誤

「的getState」不定義

現在我是一個總noob在這,但你怎麼調試這些類型的錯誤?

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

****更新的代碼 - 部分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> 
+0

您可以使用firefox和web developer或firebug擴展來調試您的javascript。 – 2009-07-27 19:34:21

回答

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"注意到......這將阻止你做正確的選擇

+0

這太讓人誤解了,應該立即刪除它。然後拍打你自己。 – 2009-07-27 19:47:22

+0

這可能是誤導? – Jason 2009-07-27 19:47:53

3

我認爲你需要從刪除的onchange = 「的getState(THIS.VALUE)」屬性您選擇標記,因爲getState JavaScript函數不再需要/正在使用。

0

您應該刪除調用的getState您的選擇元素。另外,我注意到在你的腳本中你引用了元素的名字,就好像它們是ID一樣。您應該將您的名稱屬性更改爲ID屬性,或使用選擇器,如"select[name='country']"