使用Jquery和Ajax的动态依赖选择框

如何使用Jquery，使用Ajax，的动态PHP和Mysql进行动态相关选择框。依赖 当在“父”框中进行选择时，选择从属选择框允许刷新“子”框列表数据。使用 在这篇文章中，的动态我给出了“catergory”和“subcategory”之间的依赖数据库关系示例。 这是服务器托管选择非常简单的jquery代码，希望大家喜欢。使用

数据库

示例数据库表。的动态 Data 包含列表框的依赖完整数据， data_parent 的选择key关系与 Data 包含父子关系。

CREATE TABLE data

(

id int primary key auto_increment,使用

data varchar(50),

weight int(2),

);

CREATE TABLE `data_parent` 

(

`pid` int(11) primary key auto_increment,

`did` int(11) unique,

`parent` int(11),

Foreign key(did) references data(id)

)

sections_demo.php 包含javascipt和PHP代码。高防服务器 $（“。的动态country”）。依赖change（function（）{ }  -  country 是select box的类名。使用 $（this）.val（） 调用select box值.PHP代码显示 Data 中的 结果， 其中 weight = 1

<script  type=" text/javascript " src=" http://ajax.googleapis.com/ ajax/libs/jquery/1.4.2/jquery.min.js " > </script> <script  type=" text/javascript " > $(document).ready( function

()

{

$(".country").change( function

()

{

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

} 

});

});

});

</script>

//HTML Code

Country : <select name="country" class=" country

">

--Select Country--

<?php

include(db.php);

$sql=mysql_query("select id,data from data where weight=1");

while($row=mysql_fetch_array($sql))

{

$id=$row[id];

$data=$row[data];

echo .$data.;

}  ?> City : <select name="city" class=" city

">

--Select City--

</select>

ajax_city.php 包含PHP代码。 显示 data 和 date_parent 表的源码下载结果

<?php

include(db.php);

if($_POST[id])

{

$id=$_POST[id];

$sql=mysql_query("select b.id,b.data from data_parent a,data b where b.id=a.did and parent=$id");

while($row=mysql_fetch_array($sql))

{

$id=$row[id];

$data=$row[data];

echo .$data.;

}

}

?>