2012-12-13 60 views
0

我想填充第二下拉列表基於第一個下拉列表選擇使用Ajax,jQuery,PHP和MySQL。問題是在第二個下拉列表中的選項只出現在一行!(所有選項在一行)我希望results.php內的while循環可以處理這個,但它似乎不是!你可以讓我知道我該如何解決這個問題? 這裏是我的代碼:問題與Ajax,JQuery和PHP和兩個下拉列表

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

回答

1

你應該修改你的腳本到這個..

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

感謝Aldry,它現在完美運行 – Behseini

1

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

result應該是HTML select元素的ID,您使用它作爲option元素的ID。

(你追加值到option元素,它不會產生新的HTML元素,但它們應該被插入到select元素。)