Ajax Jquery Chained Combos不能正常工作

时间:2012-12-13 07:23:59

标签: php jquery ajax

我正在尝试从PHP Jquery cookbook运行本教程,但是第一个组合框没有填充国家/地区数据,它是空的! 我在数据库中有4个表,我检查了它们,它们都很好! 表是:国家,州,城镇和Towninfo

在我的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         
    }
}
     }
     ?> 

根据书中第一个组合框必须在页面加载后填充,但我不知道为什么它是空的!能告诉我为什么会这样吗?

1 个答案:

答案 0 :(得分:0)

通话:     的GetList();

在您加载页面后无法正常工作,因为它没有正确的值“this”上下文。

您可以尝试使用:

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

而不是getList();第一次加载

或其他尝试方式:

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

这应该设置正确的背景。(但我不是100%确定它是否会起作用,因为没有试图制作小提琴。)