我给你提供一个三级的
主页面是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>三级联动下拉列表</title>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
<!--
var temp
var ids = ['province','city','eare1']//默认要 *** 作的三个ID，注意先后顺序，不可颠倒。
// 参数说明:pid是关联 的id (第二个参数) 的父级,n表示是第几级,(如第一级，第二级，第三级),selected 默认被选中的选择的主键
function getList (pid,id,n,selected) {
var list = document.getElementById(id)
//$.post 会通过POST传递2个值
//pid和action由于有？存在又传递了一个act
$.post ('ajax.php?act=getList',{'pid':pid,'action':id},function (data) {
var temp1 = eval('('+ data +')') //把传过来的字符串转化成一个JSON对象。
var leng = temp1.length
var n = (n >ids.length ) ? ids.length : n
n = (n <0 ) ? 0 : n
for (var j = n j <ids.length j++)
{
var t = 'temp'+j
t = document.getElementById(ids[j])
t.options.length = 1
t.options[0]=new Option('请选择','*')
}
if (leng >0) {
list.length = leng + 1
for (var i=0i <temp1.length i++ )
{
list.options[i+1]=new Option(decodeURI(temp1[i].key),temp1[i].val)
if (temp1[i].region_id == selected ) {
list.options[0].selected = 'selected'
}
if (selected&&list.options[i+1].value==selected){
list.options[i+1].selected = 'selected'
}
}
}
if(pid == '*') {
switch(id){
case 'city':
t = document.getElementById('city')
t.options.length = 1
t.options[0]=new Option('请选择','*')
t = document.getElementById('eare1')
t.options.length = 1
t.options[0]=new Option('请选择','*')
break
case 'eare1':
t = document.getElementById('eare1')
t.options.length = 1
t.options[0]=new Option('请选择','*')
break
}
}
if(document.getElementById('city')&&document.getElementById('city').value=='*'){
t = document.getElementById('eare1')
t.options.length = 1
t.options[0]=new Option('请选择','*')
}
})
}
$(function () {
getList ('1','province',1)
//三个都写是为了修改的时候，请三个框中默认的都有选中的值,一般增加的时候只写第一个就可以了。
})
</script>
</head>
<body>
<div >
<select name="yc1" id="province" onchange="getList (this.value,'city',1)">
<option value="*" selected="selected">请选择</option>
</select>
<select name="yc2" id="city" onchange="getList (this.value,'eare1',2)">
<option value="*" selected="selected">请选择</option>
</select>
<select name="yc3" id="eare1">
<option value="*" selected="selected">请选择</option>
</select>
</div>
</body>
</html>
AJAX 页面是
<?php
$link = mysql_connect("localhost", "root", "123456")
mysql_select_db("mydatabase")
//接收$.post传递的值并通过值对数据库进行 *** 作
$act = isset ($_GET['act']) ? $_GET['act'] : ''
$action = isset ($_POST['action']) ? $_POST['action'] : ''
$pid = isset ($_POST['pid']) ? $_POST['pid'] : ''
$arr = array()
switch ($action) {
case 'province':
$sql = "select DISTINCT(province_name) val,province_id key from province order by id"
$res = mysql_query($sql)
while($col = mysql_fetch_array($res)){
$arr[] = $col
}
break
case 'city':
$sql = "select DISTINCT(city_name) val,city_id key from city where `province_id` = '".$pid."'
order by id"
$res = mysql_query($sql)
while($col = mysql_fetch_array($res)){
$arr[] = $col
}
break
case 'eare1':
$sql = "select DISTINCT(eare1_name) val,eare1_id key from eare1 where `city_id` = '".$pid."'
order by id"
$res = mysql_query($sql)
while($col = mysql_fetch_array($res)){
$arr[] = $col
}
break
}
mysql_close($link)
$list = array()
$i = 0
foreach($arr as $k =>$v){
foreach($v as $key =>$value){
if(!preg_match("|^\d+|",$key)){
$list[$i][$key] = $value
}
}
$i++
}
//把格式化的数据通过json_encode和print_r返回
print_r (json_encode ($list))
数据库关联是
表province 区域表
有ID province_id province_name三个字段
id是自增的 province_id为唯一
表CITY 城市表
有ID city_id city_name province_id
其中province_id与province表的province_id对应
id是自增的 city_id为唯一
最后一个表类似与city表
jquery.js可以到http://jquery.com/下载
如果有问题可以在晚上7-10点 在H!给我留言
有两种方式第一种是在action中将你的list转成json字符串：
Gson gson = new Gson()
String result = gson.toJson(list)
HttpServletResponse response = ServletActionContext.getResponse()
response.setContentType("text/jsoncharset=utf-8")
response.setHeader("Cache-Control", "no-cache")
PrintWriter out = response.getWriter()
out.print(result)
out.flush()
out.close()
然后在页面中将返回值list赋给object对象
第二种就是将list放到session中：
ActionContext context = ActionContext.getContext()
context.getSession().put("list", list)
然后在页面用struts的迭代标签<s:iterator value="#request.list" id="provider">
将其一条条取出，并用
<s:property value="#provider.providerName"/>来显示
1、我是用php的，对jsp不熟，但是ajax技术过程应该是通用的，希望能给你有所提示。ajax在实现无刷新请求服务器端数据时，你返回用了三个输出流，这样ajax只能捕捉到第一个输出，后面的程序就不会执行了（或者有执行的，但是不会再返回给前台页面了，只有第一个才会返回给前台页面）。所以我建议你可以用一个数组将你要返回的这三组数据统一到数组中，然后将数组统一传递到前台页面。在php中用到了json，我觉得问题就在于此。
2、另外由于ajax是无刷新的，而当你读取数据库中数据，想要显示数据时，有些必须要刷新页面，要不然你就得在页面加载时就将所有数据传递给页面，如果你用了ajax获取到了后台页面，但此时页面已经加载完成，这样就不会显示出你从后端读出的数据，你可以在js里用reload函数，重载本页面就可以实现。这里的问题经常是会在d出显示或者用ajax删除时出现的问题，给你说下希望能能给你提供思路~~
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）