php jquery ajax json 全国省市区三级联动下拉列表 简单实现
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 ,大功告成。 |
php jquery ajax json 全国省市区三级联动下拉列表 简单实现
最新推荐文章于 2021-06-18 21:44:07 发布
php jquery ajax json 全国省市区三级联动下拉列表 简单实现
|