tag:php,javascript,js,jquery,ajax,json,全国省市区三级联动,三级联动,下拉列表,上海顶讯,刘小溪
之前也写过类似的功能，但那时候都是用AJAX把远程返回的一个select 下拉列表直接innerHTML在指定的id上面。很明显，这样的话，如果想把下拉列表变成checkbox ，那么就要修改远程请求的php代码，不够灵活。
很久以前就听小溪说，数据传送的时候，应该保持其原样，即数据源不变，我们得到数据源以后，根据我们的要求，再将其格式化成我们想要的样子。所以，这次，我采用JSON 来传送数据，后再将其遍历，生成select 里的 option 。
注意以下几点问题。
1。php传出来的数据JS 怎么接收 ？ var temp1 = eval('('+ data +')');
2。中文乱码问题。html中 decodeURI(temp1[i].region_name) php中 urlencode (iconv ('gbk','utf-8',$val['region_name']))
数据调用 的ecshop 的 ecs_region表里的数据。
先看html中我是怎么调用的
代码如下：
-----------------------------------
<!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> php jquery ajax json 全国省市区三级联动下拉列表 简单实现 </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="generator" content="editplus" />
<meta name="author" content="Fanglor" />
<meta name="keywords" content="php,jquery,ajax,json,全国省市区,三级联动" />
<meta name="description" content="php,javascript,js,jquery,ajax,json,全国省市区三级联动" />
<script type="text/javascript" src="xmphp/js/jquery.js"></script>
<script type="text/javascript">
<!--
var ids = ['province','city','eare1']; //默认要操作的三个ID，注意先后顺序，不可颠倒。
// 参数说明:pid是关联 的id (第二个参数) 的父级,n表示是第几级,(如第一级，第二级，第三级),selected 默认被选中的选择的主键
function getList (pid,id,n,selected) {
var list = document.getElementById(id);
$.post ('ajax.php?act=getList',{'pid':pid},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('请选择',-1);
}
if (leng > 0) {
list.length = leng + 1;
for (var i=0;i < temp1.length ;i++ )
{
list.options[i+1]=new Option(decodeURI(temp1[i].region_name),temp1[i].region_id);
if (temp1[i].region_id == selected ) {
list.options[i+1].selected = 'selected';
}
}
}
});
}
$(function () {
getList (1,'province',1,0);
// getList (13,'city',2,190);
// getList (190,'eare1',2,1601);
//三个都写是为了修改的时候，请三个框中默认的都有选中的值,一般增加的时候只写第一个就可以了。
});
//-->
</script>
</head>
<body>
<div >
<select name="pre" id="province" οnchange="getList (this.value,'city',1)">
<option value="-1" selected="selected">请选择</option>
</select>
<select name="pre" id="city" οnchange="getList (this.value,'eare1',2)">
<option value="-1" selected="selected">请选择</option>
</select>
<select name="pre" id="eare1">
<option value="-1" selected="selected">请选择</option>
</select>
</div>
</body>
</html>
-----------------------------------
php 代码如下:
---------------------------------
<?php
/*
* -------------------------------------------------
* Author : Fanglor
* Email : Fanlor@163.com
* Url : www.skyleft.com
* Date : 2009-11-16
* -------------------------------------------------
*/
include "config.php"; //此处为连接数据库代码，请自己修改。
$act = isset ($_GET['act']) ? $_GET['act'] : '' ;
if ($act == 'getList') {
$pid = isset ($_POST['pid']) ? intval($_POST['pid']) : 0;
$sql = "SELECT * FROM `ecs_region` WHERE `parent_id` = '{$pid}' ORDER BY `region_id` ASC ";
$list = $db->getAll($sql);
foreach ($list as $key => $val ) {
$list[$key]['region_name'] = urlencode (iconv ('gbk','utf-8',$val['region_name'])); //因为AJAX传输的为UTF-8编码的数据，所以此处一定要转码。urlencode 是为了解决中文乱码的问题。
}
print_r (json_encode ($list));
}
---------------------------------
显示效果如下:
ok ,大功告成。
565
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
