使用jquery，php和mysql进行级联下拉

Question

我正在尝试进行级联下拉菜单，我想在用户选择区域时相应地填充城市下拉菜单。

JS ：

$(document).ready(function() {
    $('#region').change(function() {
        var region = $(this).val();
        $.post('get_region.php', {
            region: region
        }, function(data) {
            $('#district_div').html(data);
        });
    });

PHP的 ：

<?php
require_once('../db/connect.php');

$region=$_POST['region'];

$q=mysql_query("select name from city where region='$region'");

$row=mysql_fetch_array($q);
echo $row['name']; 
?>

HTML * 强文本 *

 <div class="controls">

                       <select class="bootstrap-select" name="region" id="region">
                                          <option value="">Choose</option>
                                      //from database
                                          <?php echo $region_result; ?>

           </select>
  </div>

                       <select class="bootstrap-select" name="district" id="district" >

                             <div id='district_div'></div>         

          </select>

Answer 1

-for JS it should be like this-

$(document).ready(function() {
    $('#region').change(function() {
        var region = $(this).val();
        $.post('get_region.php', {
            region: region
        }, function(data) {
            $('#district').html(data); // I change this part
        });
    });


-for php-

<?php
require_once('../db/connect.php');

$region=$_POST['region'];

$q=mysql_query("select name from city where region='$region'");

while($row = mysql_fetch_array($q)){
   echo "<option>".$row['name']."</option>";
}

?>


-for the html

<div class="controls">
   <select class="bootstrap-select" name="region" id="region">
      <option value="">Choose</option>
      //from database
      <?php echo $region_result; ?>
    </select>

     <select class="bootstrap-select" name="district" id="district" >

     </select>     <!--you don't need to put a div in the select tag-->
</div>

Answer 2

您正在尝试在选择框中写入纯文本。 尝试以HTML格式编写：

<option>name</option>

在您的JS中，替换以下行：

$('#district_div').html(data);

带有：

$('#district').html(data);

删除ID为“ district_div”的DIV。 SELECT内不能有DIV。 在PHP中，最后一行是：

echo "<option>$row[name]</option>";

Answer 3

你错了一些

// will echo the name value of one row
    $row=mysql_fetch_array($q);
    echo $row['name']; 

尝试

$results = array();
while($row = mysql_fetch_array($q)){
$results[] = '<option>.'$row['name'].'</option>';
}
$optionString= implode(' ', $results);
echo $optionsString;