省份、城市、区县三级联动Html代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
function objInit(obj){
return $(obj).html("<option>请选择</option>");
}
var arrData = {
江西省:{宜春市: "袁州区,万载县",
品牌1_2: "型号1_2_1,型号1_2_2"},
湖南省:{邵阳市: "邵阳县,型号2_1_2",
品牌2_2: "型号2_2_1,型号2_2_2"},
厂商3:{品牌3_1: "型号3_1_1,型号3_1_2",
品牌3_2: "型号3_2_1,型号3_2_2"},
};
$.each(arrData, function(pF){
$("#selF").append("<option>"+pF+"</option>");
});
$("#selF").change(function(){
objInit("#selT");
objInit("#selC");
$.each(arrData, function(pF, pS){
if($("#selF option:selected").text()==pF){
$.each(pS, function(pT, pC){
$("#selT").append("<option>"+pT+"</option>");
});
$("#selT").change(function(){
objInit("#selC");
$.each(pS, function(pT, pC){
if($("#selT option:selected").text()==pT){
$.each(pC.split(","),function(){
$("#selC").append("<option>"+this+"</option>");
});
}
});
});
}
});
});
$("#Button1").click(function(){
var strValue = "您选择的省份:";
strValue += $("#selF option:selected").text();
strValue += " 您选择的城市:";
strValue += $("#selT option:selected").text();
strValue += " 您选择的区县:";
strValue += $("#selC option:selected").text();
$("#divTip").show().html(strValue);
});
})
</script>
</head>
<body>
<div class="clsInit">
省份:<select id="selF"><option>请选择</option></select>
城市:<select id="selT"><option>请选择</option></select>
区县:<select id="selC"><option>请选择</option></select>
<input id="Button1" type="button" value="查询" class="btn"/>
</div>
<div class="clsInit" id="divTip"></div>
</body>
</html>
省份、城市、区县三级联动Html代码的更多相关文章
- 省份-城市-区域三级联动【struts2 + ajax +非数据库版】
package loaderman; /** * 实体,封装省份和城市 */ public class Bean { private String province;//省份 private Stri ...
- ajax+struts2 实现省份-城市-地区三级联动
1.需求分析 2.js部分(通过ajax异步请求实现) 省份-->城市联动 城市-->地区 3.struts部分 struts.xml action部分 4.service部分 5.总结 ...
- 基于Jquery实现省份、城市、区县三级联动
前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西. 据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码: <!DOC ...
- 转: javascript实现全国城市三级联动菜单代码
<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...
- easyui commobox省市区县三级联动
1.前端代码 <div class="col-6 f-group"> <label class="col-4 left_red"> 省名 ...
- 省市县三级联动js代码
省市县三级联动菜单,JS全国省市县(区)联动代码,一般可以用于用户注册或分类信息二手交易网站,需要的朋友直接复制代码就可以用了,不过有朋友反馈说缺少某些城市,具体缺少哪个尚不知,请想用的朋友自己补全吧 ...
- 省市区县三级联动JAVA+MySQL+JQuery
场景介绍: 由于项目要求,需要做一个进件(新增)功能,而该功能里要用到车品牌.车系.车型的联动查询,也就是经典的三级联动. 大体思路如下: 进入页面,会把所有的车品牌(第一级)在后台查询出来,放到缓存 ...
- jQuery三级联动效果代码（省、市、区）
很长时间都不用jquery了,有人问我jquery写三级联动的插件我就写好了发出来吧,正好需要的人都可以看看. 一.html代码 <!DOCTYPE html> <html> ...
- js 省份城市二级动态联动的例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- cocos2dx vs2010打开打印窗口
vs2010下调试时,有时需要有打印窗口. 在main.cpp函数的开始处,加入一下 AllocConsole(); freopen("CONIN$", "r" ...
- Tomcat embed
http://www.iflym.com/index.php/code/use-embeded-tomcat-to-javaee-start-tomcat.html http://java.dzone ...
- Tomcat+redis+nginx配置
为客户开发的一个绩效系统,采用了java web的开发方式,使用了一些spring mvc, mybatis之类的框架.相比于oracle ebs的二次开发,这种开发更加灵活,虽然和ebs集成的时候遇 ...
- png的格式及像素存储分析
从图片的数据块存储方式来看png分两种 1.索引色模式存储.png8的索引色透明就采取该种方式.该种方式是将颜色存在png的可选模块调色板中,调色板的色彩存储格式为RGB(各1byte).而图片的数据 ...
- Libev学习笔记1
和Libevent相似,Libev是一个高性事件驱动框架,据说性能比Libevent要高,bug比Libevent要少.Libev只是一个事件驱动框架,不是网络库,因为它的内部并没有任何socket编 ...
- 算法导论 6-2 d叉堆
问题: d叉堆性质与二叉堆相似,但其每个非叶子结点有d个孩子: 1) 如何在一个数组中表示一个d叉堆? 2) 包含n个元素的d叉堆的高度是多少? 3) 给出 EXTRACT-MAX在d叉堆的有效实现, ...
- 开源html5_kiwijs_helloworld
本次须要的下载文件已经共享出来 网盘地址 由于我使用的是黑苹果系统, window我就无视了. 开发工具使用 网盘里的 dmg :Sublime Text 打开开发工具后在helloworld中找到 ...
- mahout贝叶斯算法开发思路（拓展篇）1
首先说明一点,此篇blog解决的问题是就下面的数据如何应用mahout中的贝叶斯算法?(这个问题是在上篇(...完结篇)blog最后留的问题,如果想直接使用该工具,可以在mahout贝叶斯算法拓展下载 ...
- Duplicate entry '97112' for key 1
1.错误描写叙述 2014-07-08 10:27:13,939 ERROR(com.you.conn.JDBCConnection:104) -com.mysql.jdbc.exceptions.j ...
- 关于python 模块导入
如何将自己写的库加入到python的库路径中: 首先查看python包含的库路径,步骤如下: a.打开python命令界面 b.import sys c.sys.path 1.在python安 ...