使用jquery,php和mysql进行级联下拉列表

时间:2013-07-04 17:32:08

标签: php jquery mysql ajax

我正在尝试进行级联下拉菜单,我希望当用户选择区域时,会相应地填充城市下拉列表。

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>

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

您正在尝试在选择框内写入纯文本。尝试用HTML格式写:

<option>name</option>

在你的JS中,替换以下行:

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

使用:

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

删除ID为#34; district_div&#34;的DIV。你不能在SELECT里面有一个DIV。在PHP中,最后一行是:

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

答案 2 :(得分:0)

你错了些什么

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