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

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

成都创新互联专注于网站建设|网站维护公司|优化|托管以及网络推广,积累了大量的网站设计与制作经验,为许多企业提供了网站定制设计服务,案例作品覆盖LED显示屏等行业。能根据企业所处的行业与销售的产品,结合品牌形象的塑造,量身策划品质网站。


数据库

示例数据库表。 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 ">
<option selected="selected">--Select Country--</option>
<?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 '<option value="'.$id.'">'.$data.'</option>';
?>
</select> <br/><br/>

City :
<select name="city" class=" city ">
<option selected="selected">--Select City--</option>
</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 '<option value="'.$id.'">'.$data.'</option>';
}
}
?>

网站题目:使用Jquery和Ajax的动态依赖选择框
本文链接:https://www.cdcxhl.com/article46/poiphg.html

成都网站建设公司_创新互联,为您提供服务器托管网站排名定制开发网站设计云服务器搜索引擎优化

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

网站托管运营