首先看文件结构:
/inc 包含function.php文件和数据操作类
/index.php html代码和州的收据获取代码
/ajax_city.php 城市数据的获取代码
/ajax.js httpRequest的建立和异步请求
index.php文件:
ajax联动下拉框菜单
".$rows['state_name']."";
}
?>
please select state first
ajax.js文件:
var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject(){
var xmlHttp;
try{
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
for (var i=0; i
function getcityOk(){
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
try{
var classObj = document.getElementById("city");
classObj.innerHTML=response; // 开始的写法,但无论如何也传不到页面中去!→
classObj.outerHTML=response;
}
catch(exception){}
}
}
ajax_city.php文件:
"; //修正追加部分 by zhoz 11130123
foreach ($city as $rows){
echo "".$rows['city_name']."";
}
echo "";
?>
function.php文件:
function get_select_values($table){
global $db;
$query = "select * from $table";
$result = $db->query($query);
if (!$result)
return false;
$num_newslist = $db->num_rows($result);
if ($num_newslist ==0)
return false;
$result = $db->result_to_array($result);
return $result;
}
function get_select_city($state_ID){
global $db;
$query = "select * from city where state_ID=$state_ID";
$result = $db->query($query);
if (!$result)
return false;
$num_newslist = $db->num_rows($result);
if ($num_newslist ==0)
return false;
$result = $db->result_to_array($result);
return $result;
}
总结:
这只是一个简单的联动菜单,但当我把select对象传入函数中去,并在请求的url上加上参数,那就改成了一个多级联动的下拉选择菜单了。这里我测试没有通过,即选择了大类以后,小类可以跳动,但是改变了的值无法正常显示。由于时间较晚了,今天就到这了,等测试通过后,我再来说明原因吧
分享到:
相关推荐
Ajax实现二级/三级联动下拉框---servlet版
ajax+json实现多级联动菜单.doc
ajax+jsp实现的多级联动菜单的实现。
用ajax实现的jsp二级联动下拉列表,使用异步交互的二级联动堪称jsp革命性变动。以前的联动大都是把所有的数据取出来放在javascript中,就一个字------烦
项目开发中经常用到的联动菜单,该示例代码用ajax实现 非常方便,下载后可以自行扩展
1、javascript实现二级联动:运用jsp标签拼写Javascript代码,实现一个二维数组,点击一级栏目时,查询二维数组里...2,ajax实现的二级联动:利用Ajax与后台程序实现异步交互,后台程序拼写JOSN字符串,发送到客户端。
php+ajax 二级联动 无刷新实现省市县联动。
struts2+jsp+json+javascript实现的三级下拉菜单,没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
struts2 ajax实现的二级联动 struts2 ajax实现的二级联动
AJAX动态加载无限级分类联动下拉菜单 ----------------------------使用说明--------------------------- 1.将文件夹database下的SQL文件menu导入本地数据库 2.打开config文件夹下的config.php,设置本地数据库相关...
使用ajax实现的二级级联菜单,简单易学
ASP 实用的ajax二级联动菜单
Smarty + Ajax 下拉菜单二级联动: 1. 建立数据库ajaxtest (使用utf8) 2. 进行conn.php 修改root密码 3. 导入表 product.sql --- 主产品 4. 导入表 producttest.sql -- 二级产品 弄好后运行:...
该资源包含了一个使用jquery ajax实现的省市二级联动的简单demo,简单易懂,可以参考博客:http://blog.csdn.net/mockingbirds/article/details/46842327
ajax初级入门。 无刷新实现省市2级菜单联动。 代码简单,很容易明白。
asp+ajax二级联动菜单.rar
jsp,ajax,java, 实现城市三级联动菜单
最近收集了很多联动菜单. 下拉联动菜单,有涉及到数据库的,有ajax的,有无限级ajax联动菜单. ....
ajax 二级联动 php js html