省市区三级联动(二)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);
} })
}
省市区三级联动(二)JS部分简单版的更多相关文章
- 省市区三级联动,JS实现
文件下载地址:http://files.cnblogs.com/files/chenwolong/jsAddress.rar 示例截图: 在这里自己记录一个方法: function cmbAddOpt ...
- QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
- JS实现年月日三级联动+省市区三级联动+国家省市三级联动
开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...
- 插件 原生js 省市区 三级联动 源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS省市区三级联动
不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...
- 从QQ网站中提取的纯JS省市区三级联动
在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...
- 使用腾讯IP分享计划网站中的纯JS省市区三级联动
JS地址:http://ip.qq.com/js/geo.js 实例如下: <!DOCTYPE html> <html> <head> <title>省 ...
- JS 省市区三级联动
JS 省市区三级联动: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- 【转】纯JS省市区三级联动(行政区划代码更新至2015-9-30)
本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...
随机推荐
- Android HttpHeader的坑
昨天遇到一个问题,代码如下: private String getSessionId(HttpResponse response) { // TODO Auto-generated method st ...
- sp_rename
sp_rename 在当前数据库中更改用户创建对象的名称. 此对象可以是表.索引.列.别名数据类型或 Microsoft .NET Framework 公共语言运行时 (CLR) 用户定义类型. 更改 ...
- Selenium2学习-035-WebUI自动化实战实例-033-页面快照截图应用之三 -- 区域截图(专业版)
之前有写过两篇博文讲述了 WebUI 自动化测试脚本中常用的截图方法,敬请参阅如下所示链接: 浏览器显示区域截图 浏览器指定区域截图 那么当需要截取的区域不在浏览器显示窗口范围之内时,之前的方法显然无 ...
- Selenium2学习-003-WebUI自动化实战实例-001-百度搜索
此文主要通过百度搜索功能,进行 Selenium2 的实战实例讲解,文中所附源代码于 2015-01-16 02:01 亲测通过,敬请亲们阅览.希望能对初学 Selenium2 UI 自动化测试编程的 ...
- 给ul中的li添加事件的多种方法
给ul中的li添加事件的多种方法 这是一个常见,而且典型的前端面试题 <ul> <li>11111</li> <li>22222</li> ...
- LeetCode Shortest Palindrome
原题链接在这里:https://leetcode.com/problems/shortest-palindrome/ 题目: Given a string S, you are allowed to ...
- 几个系统调用分析 glibc中的malloc调用和共享内存原理
本文主要分析内存以及I/O相关的系统调用和库函数的实现原理,根据原理给出在使用过程中需要注意的问题和优化的侧重点,本文涉及到的系统调用包括readahead,pread/pwrite,read/wri ...
- C# --通过枚举获取系统颜色
public static System.Drawing.Color GetSystemColor(int i) { Array Colors = System.Enum.GetValues(type ...
- 面向对象编程(十)——继承之Super关键字及内存分析
Super关键字
- C#线程系列讲座(2):Thread类的应用
一.Thread类的基本用法 通过System.Threading.Thread类可以开始新的线程,并在线程堆栈中运行静态或实例方法.可以通过Thread类的的构造方法传递一个无参数,并且不返回值(返 ...