2012-12-13 88 views
1

我想從PHP Jquery的食譜運行本教程,但第一個組合框沒有填充國家數據,它是空的! 我在數據庫中有4個表,我已經檢查過它們,它們都很好! 表是:國家,州,市和TowninfoAjax Jquery鏈接組合不工作

在我的HTML我有:

<html> 
<head> 
</head> 
<body> 
    <ul> 
     <li> 
      <strong>Country</strong> 
      <select id="countryList"> 
       <option value="">select</option> 
      </select> 
     </li> 
     <li> 
      <strong>State</strong> 
      <select id="stateList"> 
       <option value="">select</option> 
      </select> 
     </li> 
     <li> 
      <strong>Town</strong> 
      <select id="townList"> 
       <option value="">select</option> 
      </select> 
     </li> 
    </ul> 
    <p id="information"></p> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() 
     { 
     $('select').change(getList); 
      getList(); 
      function getList() 
      { 
       var url, target; 
       var id = $(this).attr('id'); 
       var selectedValue = $(this).val(); 
       switch (id) 
       { 
        case 'countryList': 
         if(selectedValue == '') return; 
         url = 'results.php?find=states&id='+ selectedValue; 
         target = 'stateList'; 
        break; 

        case 'stateList': 
         if($(this).val() == '') return; 
         url = 'results.php?find=towns&id='+ selectedValue; 
         target = 'townList'; 
        break; 

        case 'townList': 
         if($(this).val() == '') return; 
         url = 'results.php?find=information&id='+ selectedValue; 
         target = 'information'; 
        break; 

        default: 
         url = 'results.php?find=country'; 
         target = 'countryList'; 
       } 
       $.get(
        url, 
        { }, 
        function(data) 
        { 
         $('#'+target).html(data); 
        } 
       ) 
      } 
     }); 
    </script> 
</body> 
</html> 

,並在php文件我有:

<?php 
$mysqli = new mysqli('localhost', 'root', '', 'chain'); 
$find = $_GET['find']; 
    switch ($find) 
    { 
case 'country': 
$query = 'SELECT id, countryName FROM country'; 
break; 

    case 'states': 
$query = 'SELECT id, stateName FROM states WHERE countryId='.$_GET['id']; 
break; 

    case 'towns': 
$query = 'SELECT id, townName FROM towns WHERE stateId='.$_GET['id']; 
break; 
case 'information': 
    $query = 'SELECT id, description FROM towninfo WHERE townId='.$_GET['id'] .' LIMIT 1'; 
break; 
    } 
    if ($mysqli->query($query)) 
    { 
$result = $mysqli->query($query); 
if($find == 'information') 
{ 
    if($result->num_rows > 0) 
    { 
     $row = $result->fetch_array(); 
     echo $row[1]; 
    } 
    else 
    { 
     echo 'No Information found'; 
    } 
} 
else 
{ 
    ?> 
    <option value="">select</option> 
    <?php   
    while($row = $result->fetch_array()) 
    { 
     ?>   
     <option value="<?php echo $row[0]; ?>"><?php echo $row[1]; ?>   </option>  
     <?php   
    } 
} 
    } 
    ?> 

根據預定的第一組合框必須在頁面加載後填充,但我不知道它爲什麼是空的!你能告訴我爲什麼會發生這種情況!

回答

0

調用: getList();

加載頁面後無法正常工作,因爲它沒有正確的值「this」上下文。

你可以嘗試使用:

$('select').trigger("change"); 

代替的GetList();首次裝載

或另一種方式來嘗試:

$(document).ready(function(){ 
    $('select').change(getList); 
    getList.call($('select')); 
    function getList(){...} 
} 

這應該設置適當的環境(但我不是100%肯定這是否會成功,因爲沒有嘗試過做小提琴。 )