省市区三级联动(二)JS部分简单版

通过对上一篇《省市区三级联动》的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数。

注意:html部分和chuli.php部分不变

1.下拉列表填充可以写成带参数的函数

$("#sjld").html("<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>");

	//1.填充省市区
	fill("0001",$("#sheng"));
	fill($("#sheng"),$("#shi"));
	fill($("#shi"),$("#qu"));

  

2.省或区发生改变,市和区的填充也写成带参数的函数

//2.改变省选择,相应的要重新填充市、区选择
	$("#sheng").change(function(){

		fill($("#sheng"),$("#shi"));
		fill($("#shi"),$("#qu"));

		})

    //3.改变市选择,相应的要重新填充区选择
	$("#shi").change(function(){

		fill($("#shi"),$("#qu"));

		})

  

3.填充省市区的函数方法可以写成fill(p,z)函数

function fill(p,z)
	{
		//获取父级代号
		if(p=="0001")
		{
			var pcode=p;
		}
		else
		{
			var pcode=p.val();
		}
		//调用ajax方法
		$.ajax({

			async:false,
			url:"chulisjld.php",
			data:{pcode:pcode},
			type:"POST",
			dataType:"TEXT",
			success: function(data){

				var hang=data.split("|");
				var str="";

				for(var i=0;i<hang.length;i++)
				{
					var lie=hang[i].split("^");

					str+="<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
				}
				z.html(str);
				}

			})
	}

  

时间: 2024-12-28 16:28:06

省市区三级联动(二)JS部分简单版的相关文章

【修改】纯JS省市区三级联动 支持js默认省市区

---恢复内容开始--- <!DOCTYPE html><html><head><title>修改,QQ JS省市区三级联动 -支持默认省市区</title><!-- 使用QQ的省市区数据 --><!--<script type="text/javascript" src="http://ip.qq.com/js/geo.js"></script>--><

省市区三级联动(js)在js中已预定好数据

//js代码如下: var addressInit = function(_cmbProvince, _cmbCity, _cmbArea, defaultProvince, defaultCity, defaultArea) { var cmbProvince = document.getElementById(_cmbProvince); var cmbCity = document.getElementById(_cmbCity); var cmbArea = document.getEl

QQ JS省市区三级联动

如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http://ip.qq.com/js/geo.js"></script> --> <

JS省市区三级联动

不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html><head><title>纯JS省市区联动</title><script type="text/javascript" src="jsAddress.js"></script></head><bod

从QQ网站中提取的纯JS省市区三级联动

http://www.cnblogs.com/zjfree/p/3269864.html 今天收到园友信息,想问我要原来写的一个 < 纯JS省市区三级联动 >文章中最新的省市区数据. 那个是老早以前搞的.记得数据是从数据库中提取生成的.一时也找不到当时的数据库了. 我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动.所以研究了一下.他的界面如下: 何不直接使用的数据呢? 惊喜的是QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com

省市区三级联动 js 腾讯的 直接用就行的

js地址:http://ip.qq.com/js/geo.js 使用示例: <!DOCTYPE html><html><head><title>QQ JS省市区三级联动</title><!-- 直接使用QQ的省市区数据 --><!--<script type="text/javascript" src="http://ip.qq.com/js/geo.js"></scri

JS 省市区三级联动

JS 省市区三级联动: <!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> <meta http-equiv=&q

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html><html>    <head>        <meta c

用jsp实现省市区三级联动下拉

jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善用户体验,目前基本上所有网站都是采用这一种方式.现在ajax的使用已经不像最初那样使用最原始的方法了,因为有很多的js框架供我们选择,我们只需要调用它们的一个方法就可以实现ajax功能,而其他的则交给js组件去完成. 最近整理了一份最新的全国省市区县数据库,再加上之前还没有在jsp中实现过省市区三级