JS经典实例网站首页 JS经典实例

省市级联效果ajax版

发布时间：2015-04-22 20:47:49编辑：雪饮阅读（）

首先来对省市级联效果进行分析如下：

省市级联的第一个下拉选择省，第二个下拉选择市，第三个下拉选择县。

我们这里只做到“市”级，县级以此类推。

首先第一个下拉option中预置两个省和一个初始选项，当用户选择某个省份的时候就会在“市”所在option中新增当前省份的所有市的名称（当然先清空下市中默认的所有选项，否则会出现每次选择省份都新增选项，会出现好多的重复），新增选项可以用createElement函数，对于新增的选项值可以用ajax获取已经定义好的xml格式数据。基本思路就是这样了。下面看看看源代码吧：

showcitys.html前端源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

//创建ajax引擎

function getxmlhttpobject(){

var xmlhttprequest;

if(window.ActiveXObject){xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");}

else{xmlhttprequest=new XMLHttpRequest();}

return xmlhttprequest;

}

//全局变量

var myxmlhttprequest="";

//用id快速捕捉元素

function $(id){

return document.getElementById(id);

}

//选择省时取出当前所选省里面所有的市名称

function getcities(){

myxmlhttprequest=getxmlhttpobject();

if(myxmlhttprequest){

var url="chuli.php";

var data="province="+$('sheng').value;

myxmlhttprequest.open("post",url,true);//异步方式

myxmlhttprequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

myxmlhttprequest.onreadystatechange=chuli;

myxmlhttprequest.send(data);

}

function chuli(){

if(myxmlhttprequest.readyState==4){

if(myxmlhttprequest.status==200){

var cities=myxmlhttprequest.responseXML.getElementsByTagName("city");

$("city").length=0;//先将城市清零

//新增默认值

var newshi=document.createElement("option");

newshi.value="";

newshi.innerText="--城市--";

$("city").appendChild(newshi);

for(var i=0;i<cities.length;i++){

var city_name=cities[i].childNodes[0].nodeValue;

//创建新元素

var myoption=document.createElement("option");

myoption.value=city_name;//设置value值

myoption.innerText=city_name;//设置inner值

$("city").appendChild(myoption);

}

</script>

</head>

<body>

</select>

</select>

</select>

</body>

</html>

chuli.php后端代码：

<?php

header("Content-Type:text/xml;charset=gb2312");

header("Cache-Control:no-cache");//告诉浏览器不要缓存数据

$sheng=$_POST["province"];

输出调试信息到文件mylog.log(自动创建该文件)中,输出信息$sheng，以换行的方式（文件中换行是以"\r\n"，c/s架构都是以“\r\n换行的”）,以追加的方式输出的（FILE_APPEND）

file_put_contents("d:/mylog.log",$sheng."\r\n",FILE_APPEND);

$info="";

if($sheng=="zhejiang"){

$info="<province><city>杭州</city><city>温州</city><city>宁波</city></province>";

}

else if($sheng=="jiangsu"){

$info="<province><city>南京</city><city>徐州</city><city>苏州</city></province>";

}

echo $info;

效果预览：

QQ图片20150422211733.png

在这里雪饮个人博客提醒下需要注意的事项：

1、对于后端数据我们可以用json也可以用xml，但对于使用json的千万记住使用eval函数进行转换对象

2、雪饮在本文中所使用的创建html元素的javascript是原生的，和创建xml的dom节点使用方法一样

3、file_put_contents("d:/mylog.log",$sheng."\r\n",FILE_APPEND);调试函数可以快速的进行数据传输方面的调试，我们不必去获取xml、json等繁杂的方法，直接可以在后端调试前端以弹窗的方式测试，这样会省许多的时间。

关键字词：省市,级联,个人博客

上一篇：php与ajax-json数组对象,json对象数组

下一篇：韩顺平ajax黄金价格涨跌实例完整版

您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

省市级联效果ajax版

相关文章

您当前的位置：首页 > 学无止境 > JS经典实例网站首页 JS经典实例