Ajax,Jquery和PHP以及两个下拉列表的问题

时间:2012-12-13 09:23:05

标签: php jquery ajax

我正在尝试使用Ajax,jQuery,PHP和MySQL基于第一个下拉列表选择填充第二个下拉列表。问题是第二个下拉列表中的选项只出现在一行中!(一行中的所有选项)我希望results.php中的while循环可以处理这个但似乎没有!能告诉我如何解决这个问题吗? 这是我的代码:

<html>
<body>
<?php
$mysqli = new mysqli('localhost', 'root', '', 'chain');
if ($mysqli->connect_errno) 
{
die('Unable to connect!');
}
else
{
$query = 'SELECT * FROM Cars';
if ($result = $mysqli->query($query)) 
 {
 if ($result->num_rows > 0) 
    {
 ?> 
 <p>
  Select a Car
<select id="selectCar">
<option value="select">Please Select From The List</option>
    <?php       
     while($row = $result->fetch_assoc()) 
   {
   ?>       
   <option value="<?php echo $row['id']; ?>"><?php echo $row['title']; ?></option>      
  <?php         
}
  ?>
 </select>
 </p>
<select>
    <option value="select">Please Select From The List</option>
    <option id="result"></option>
    </select>
    <?php
    }
    else 
    {
        echo 'No records found!';
    }
    $result->close();
}
else 
{
    echo 'Error in query: $query. '.$mysqli->error;
}
    }
     $mysqli->close();
    ?>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $('#selectCar').change(function()
            {
                if($(this).val() == '') return;
                $.get(
                    'results.php',
                    { id : $(this).val() },
                    function(data)
                    {
                        $('#result').html(data);
                    }
                );
            });
        });
    </script>
      </body>
      </html>
我在PHP结果中

<?php
 $mysqli = new mysqli('localhost', 'root', '', 'chain');
 $resultStr = '';
 $query = 'SELECT * FROM models WHERE carID='.$_GET['id'];
 if ($result = $mysqli->query($query)) 
 {
if ($result->num_rows > 0) 
{
    while($row = $result->fetch_assoc())
    {
  $resultStr.=  '<option    value="'.$row['id'].'">'.$row['model'].'</option>'; 
    }
}
else
{
 $resultStr = 'Nothing found';
}
   }
    echo $resultStr;
   ?>

2 个答案:

答案 0 :(得分:1)

您在主文件中设置了$('#result').html(data);

result应该是HTML select元素的ID,您将其用作option元素的ID。

(您将值附加到option元素中,该元素不会创建新的HTML元素,但应将它们插入到select元素中。)

答案 1 :(得分:1)

您应该将脚本编辑为此...

<select id="result">
  <option value="select">Please Select From The List</option>
</select>