专注企业网站设计,成就互联网新动力。

www.cccidea.com

您当前的位置:首页>技术中心>程序专区

三级联动下拉列表实现

时间:2013-06-14 01:04:17来源:本站作者:厦门网站建设点击:89

 采用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" onchange="getList (this.value,'city',1)">
<option value="-1" selected="selected">请选择</option>
</select> 

<select name="pre" id="city"  onchange="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,javascript,js,jquery,ajax,json,全国省市区三级联动,三级联动,下拉列表
更多

上一篇:几种不间断图片滚动效果

下一篇:Web 开发与设计语言

匿名