jQuery下拉依赖 [英] jQuery dropdown dependent

问题描述

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

I have 2 dropdown lists. The first one shows the regions from a country, the other one every city in the selected state. The problem is that after I submit my form MySQL Database gets from the first list the ID of the region selected, while the second list doesen't show anything. I want to make my database receive the right information. The name of the region and the name of the city.

我该怎么做？

$(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 脚本是：

My section.php script is:

<?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 文件如下所示：

The ajax_city.php file looks like this:

<?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中更改一些内容吗？

The code works fine. But I can't figure out what to do with the database. I think I have to change something in the JavaScript?

请帮忙吗？

推荐答案

数据库： 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

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

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>";
    }
}

?>

这篇关于jQuery下拉依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！