jquery ajax include,使用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'

text/javascript

" src="

ajax/libs/jquery/1.4.2/jquery.min.js

"

>

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

}

});

});

});

//HTML Code

Country :

--Select Country--

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 City--

ajax_city.php

包含PHP代码。

显示

data

和

date_parent

表的结果

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.'';

}

}

?>