jQuery下拉依赖

Question

我有2个下拉列表。第一个显示来自一个国家的区域，另一个显示所选州的每个城市。问题是我提交表单后的MySQL数据库 从第一个列表中获取所选区域的ID，而第二个列表不显示任何内容。我想让我的数据库收到正确的信息。区域名称和城市名称。

我该怎么做？

我的javascript看起来像这样：

$(document).ready(function() {
    $(".region").change(function() {`enter code here`
        var id = $(this).val();
        var dataString = 'id=' + id;

        $.ajax({
            type: "POST",
            url: "ajax_city.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $(".city").html(html);
            }
        });
    });
});​

我的section.php脚本是：

<?php

  <label>Country :</label> <select name="country" class="country">
  <option selected="selected">--Select Region--</option>

<?php
 $sql = mysql_query("SELECT id,region FROM regions ORDER BY region");
   while ($row = mysql_fetch_array($sql)) {
    $id     = $row['id'];
    $region = $row['region'];
    echo '<option value="' . $id . '">' . $region . '</option>';
  } 
?>
 </select> <br/><br/>
 <label>City :</label> <select name="city" class="city">
 <option selected="selected">--Select City--</option>

 </select>

?>

ajax_city.php文件如下所示：

<?php

if($_POST['id']) {
  $id = $_POST['id'];
  $sql=mysql_query("SELECT DISTINCT city FROM CITY where id_city=$id order by city");

    while($row = mysql_fetch_array($sql)) {
      $id=$row['id'];
      $data=$row['city'];
      echo "<option value=$id>$data</option>";
    }
 }

?>

代码工作正常。但我无法弄清楚如何处理数据库。我想我必须在JavaScript中改变一些东西吗？

请帮忙吗？

Answer 1

<script type="text/javascript">
$(document).ready(function()
{
    $(".country").change(function()
    {
        var id=$(this).val(); 
        var region = $(this).find('option:selected').html();  
        $.ajax({
          type: "POST",
          url: "ajax_city.php",
          data: { country: id , name : region },
          cache: false,
          success: function(html)
           {
             $(".city").html(html);
             $(".city").removeAttr('disabled');
           } 
    });
    });
});
</script>

section.php

<label>Country :</label> 
<select name="country" class="country">
    <option selected="selected">--Select Region--</option>
        <?php
            $sql=mysql_query("SELECT id,region FROM regions ORDER BY region");
            while($row = mysql_fetch_array($sql))
            {
                $id=$row['id'];
                $region=$row['region'];
                echo '<option value="'.$id.'">'.$region.'</option>';
            } 
            ?>
</select><br/><br/>
<label>City :</label> 
<select disabled name="city" class="city">
    <option selected="selected">--Select City--</option>
</select>

ajax_city.php

<?php
    if($_POST['country'])
    {
        $id = $_POST['country'];
        $region = $_POST['name'];
        $sql = mysql_query("SELECT DISTINCT city FROM CITY where id_city = $id order by city");

        while($row = mysql_fetch_array($sql))
        {
            $id=$row['id'];
            $data=$row['city'];
            echo "<option value=$id>$data</option>";
        }
    }
?>

Answer 2

数据库：country

CREATE TABLE IF NOT EXISTS `city` ( `id_city` int(11) NOT NULL AUTO_INCREMENT,  `city` varchar(30) NOT NULL,  `pid` int(11) NOT NULL,  PRIMARY KEY (`id_city`)) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;


INSERT INTO `city` (`id_city`, `city`, `pid`) VALUES(1, 'Gujarat', 1),(2, Maharashtra', 1),(3, 'Rajasthan', 1),(4, 'Madhya Pradesh', 1),(5, 'Lahore', 2),(6, 'hyderabad', 2);

CREATE TABLE IF NOT EXISTS `regions` ( `id` int(11) NOT NULL AUTO_INCREMENT,  `region` varchar(30) NOT NULL,  PRIMARY KEY (`id`)) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO `regions` (`id`, `region`) VALUES(1, 'India'),(2, 'Pakistan');

Javascript On default.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

     <script type="text/javascript">
     $(document).ready(function()
 {
$(".country").change(function()
{
    var id=$(this).val(); 
    var region = $(this).find('option:selected').html();  
    $.ajax({
      type: "POST",
      url: "ajax_city.php",
      data: { country: id , name : region },
      cache: false,
      success: function(html)
       {
         $(".city").html(html);
         $(".city").removeAttr('disabled');
       } 
   });
  });
 });
  </script>

 <label>Country :</label> 
 <select name="country" class="country">
  <option selected="selected">--Select Region--</option>
     <?php
            $conn=mysql_connect("localhost","root","");
            $db=mysql_select_db("country",$conn);

        $sql=mysql_query("SELECT id,region FROM regions ORDER BY region");
        while($row = mysql_fetch_array($sql))
        {
            $id=$row['id'];
            $region=$row['region'];
            echo '<option value="'.$id.'">'.$region.'</option>';
        } 
        ?>
   </select><br/><br/>
   <label>City :</label> 
  <select disabled name="city" class="city">
     <option selected="selected">--Select City--</option>
  </select> 

ajax_city.php

<?php
  if($_POST['country'])
{
    $conn=mysql_connect("localhost","root","");
    $db=mysql_select_db("country",$conn);


    $id = $_POST['country'];
    $region = $_POST['name'];
    $sql = mysql_query("SELECT DISTINCT city FROM CITY where pid = $id order by city");

    while($row = mysql_fetch_array($sql))
    {
        $id=$row['id'];
        $data=$row['city'];
        echo "<option value=$id>$data</option>";
    }
}

?>