<!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 += "&nbsp;您选择的城市:";
strValue += $("#selT option:selected").text();
strValue += "&nbsp;您选择的区县:";
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代码的更多相关文章

  1. 省份-城市-区域三级联动【struts2 + ajax +非数据库版】

    package loaderman; /** * 实体,封装省份和城市 */ public class Bean { private String province;//省份 private Stri ...

  2. ajax+struts2 实现省份-城市-地区三级联动

    1.需求分析 2.js部分(通过ajax异步请求实现) 省份-->城市联动 城市-->地区 3.struts部分 struts.xml action部分 4.service部分 5.总结 ...

  3. 基于Jquery实现省份、城市、区县三级联动

    前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西. 据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码: <!DOC ...

  4. 转: javascript实现全国城市三级联动菜单代码

    <html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...

  5. easyui commobox省市区县三级联动

    1.前端代码 <div class="col-6 f-group"> <label class="col-4 left_red"> 省名 ...

  6. 省市县三级联动js代码

    省市县三级联动菜单,JS全国省市县(区)联动代码,一般可以用于用户注册或分类信息二手交易网站,需要的朋友直接复制代码就可以用了,不过有朋友反馈说缺少某些城市,具体缺少哪个尚不知,请想用的朋友自己补全吧 ...

  7. 省市区县三级联动JAVA+MySQL+JQuery

    场景介绍: 由于项目要求,需要做一个进件(新增)功能,而该功能里要用到车品牌.车系.车型的联动查询,也就是经典的三级联动. 大体思路如下: 进入页面,会把所有的车品牌(第一级)在后台查询出来,放到缓存 ...

  8. jQuery三级联动效果代码（省、市、区）

    很长时间都不用jquery了,有人问我jquery写三级联动的插件我就写好了发出来吧,正好需要的人都可以看看. 一.html代码 <!DOCTYPE html> <html> ...

  9. js 省份城市二级动态联动的例子

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. 二、Python-----用户交互

    1.用户交互 Python 3.0的写法 name = input("Please input your name:") Python 2.0的写法 name = raw_inpu ...

  2. DLL与EXE之间的通讯调用 以及 回调函数的线程执行空间

    dll 与 exe 之间的通讯方式有很多种, 本文采用回调函数的方法实现, 本文也将研究多线程,多模块的情况下,回调函数所在的线程, 啥也不说了,先附上代码: 下面的是dll模块的的, dll的工程文 ...

  3. Noip2007提高组总结

    两道基础题,后两题比较麻烦,算法想出来后,还是一些细枝末节的问题,需要特别注意,感觉Noip的题目质量还是挺高的,每做一套,都感觉会有大大小小不同的收获,就要月考了,最后把07年的题目总结一下,算是这 ...

  4. Noip2008提高组总结

    Noip2008前三题是基础题,仔细一些都是可以AC的,第四题的证明很巧妙,但是看懂后代码其实很简单,感觉在这些大家都不屑去做的简单题中又学到了不少,四道题代码基本都是十几二十行就够了,渐渐感觉到,比 ...

  5. HDU 1240 Asteroids!

    三维广搜 #include <cstdio> #include <iostream> #include <cstring> #include <queue&g ...

  6. HDU 1104 Remainder（ BFS（广度优先搜索））

    Remainder Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  7. STM32菜鸟成长记录---RS485通讯协议的应用

    写作原因:近来蛋闲?非也  !  昨天一同事合作的项目代码出现的bug-----他的上位机每200ms给我发送命令向我这边下位机读取一些数据,在此过程会按下按键做一些另外操作并给他返回数据:(通信是通 ...

  8. 你应当知道的Java牛人

    Java领域有非常多著名的人物,他们为Java社区编写框架.产品.工具或撰写书籍改变了Java编程的方式. 本文是<最受欢迎的8位Java牛人>的2.0版本号. PS:排名不分先后.本文的 ...

  9. Spark调研笔记第2篇 - 怎样通过Sparkclient向Spark提交任务

    在上篇笔记的基础上,本文介绍Sparkclient的基本配置及Spark任务提交方式. 1. Sparkclient及基本配置 从Spark官网下载的pre-built包中集成了Sparkclient ...

  10. 调用AnimateWindow API来实现弹出效果

    下面是实例的cs代码 public partial class frm_Main : Form { //使用Windows Api AnimateWindow [DllImport("use ...