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

news/2024/7/11 0:04:13 标签: Jquery, Ajax, php

如何使用JqueryAjax,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">
<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>';
}
}
?>


http://www.niftyadmin.cn/n/1335801.html

相关文章

Web Animation API-释放JavaScript中CSS关键帧的强大功能

如果您曾经使用过CSS3关键帧动画&#xff0c;那么您可能会对这个功能感到非常欣赏并感到受到严重阻碍。一方面&#xff0c;CSS关键帧允许您使用纯CSS创建复杂的动画&#xff0c;尽管其中也存在问题 - 所有内容都必须在CSS内部预先声明。我最喜欢的jQuery方法之一就是这个 anima…

ssh sshpass随笔

1&#xff1a; 当通过ssh连接远程服务器的时候&#xff0c;可能会出现以下繁琐场景&#xff0c;需要手工输入yes&#xff1a; ssh usernameip 这对于某些分布式集群来说是不行的&#xff0c;甚至导致集群都不能启动成功&#xff0c;对于像pssh&#xff0c;pscp这样的自动化工具…

为您审核的30多个Web工具和服务

市场上挤满了成千上万的网络工具和服务&#xff0c;每天都会推出新的网络产品。它非常简单&#xff0c;任何人都可以做到。怎么可能&#xff1f;因为技术以难以想象的方式发展&#xff0c;现在通过使用正确的Web工具和服务可以实现一切。 可以在几分钟内完成网上商店或博客的发…

PHP异步非阻塞之路

需求 一个简单的需求&#xff0c;提交大量数据到远程服务器&#xff0c;此时并不需要等待返回。 另一个需求&#xff0c;获取API数据&#xff0c;同时查询数据库&#xff0c;并行处理&#xff0c;加快响应速度。 配置问题 set_time_limit ignore_user_abort fastcgi_finish_req…

CSS变量简介

CSS变量简介 如今的浏览器开发似乎正好取代了流行的库和扩展目前为我们提供的功能。ECMAScript 6几乎完全没有jQuery&#xff0c;而十字线中的下一个似乎是CSS预处理器&#xff0c;如SASS和LESS。现代版Firefox和Chrome 支持 CSS变量&#xff08;也称为CSS自定义属性&#xff…

不要VIP,想看啥就看啥的在线网站!

有句话说得好&#xff0c;我们舍得花300块买衣服&#xff0c;却舍不得掏20块充视频VIP&#xff0c;毕竟充了也不是天天都看&#xff0c;那岂不是亏大发了&#xff0c;出于种种原因&#xff0c;我们有时候不得不做伸手党&#xff0c;诺&#xff0c;手伸出来&#xff0c;我给你啊…

该来的都在路上

一、 Servlet1.1、servlet简介Servlet&#xff08;Server Applet&#xff09;是Java Servlet的简称&#xff0c;称为小服务程序或服务连接器&#xff0c;用Java编写的服务器端程序&#xff0c;具有独立于平台和协议的特性&#xff0c;主要功能在于交互式地浏览和生成数据&#…

maven的scm插件介绍及使用示例

Maven中为我们集成了软件配置管理的&#xff08;SCM&#xff1a;Software Configuration Management&#xff09;功能&#xff0c;他可以支持我们常用SVN、CVS等&#xff0c;到现在我使用的1.8.1版本&#xff0c;共支持18个命令&#xff1a; scm:branch - branch the project&a…