<!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安装集成包

    anaconda, 包含各种科学运算包以及astropy.装完它一劳永逸. https://www.continuum.io/downloads

  2. Java web 开发环境配置。

    一.配置 win8 64位 环境java 开发环境 1.  下载JDK,地址 http://www.oracle.com/technetwork/java/javase/downloads/index ...

  3. 电子标签（RFID）天线的印制技术

    电子标签是射频识别(RFID)的俗称,RFID是射频识别技术的英文(RadioFrequencyIdentification)缩写,射频识别技术是一项利用射频信号通过空间耦合(交变磁场或电磁场)实现无 ...

  4. Android 百度地图开发问题----解决地图有时候加载不出来问题

    相信很多人在开发百度地图的时候会出现百度地图有时候会加载不出来,只显示网格图. 这个问题究其原因就是申请百度key的时候填写的SHA1也就是指纹证书有问题.估计很多开发者都是照着百度开放平台上介绍的流 ...

  5. python defaultdict 类型

    在Python里面有一个模块collections,解释是数据类型容器模块.这里面有一个collections.defaultdict()经常被用到.主要说说这个东西. 综述: 这里的defaultd ...

  6. android 大小写转换

    private void toUpperCase(byte[] data, int start, int len) { int end = start + len; int dist = 'A' - ...

  7. 微软正式公布Visual Studio 2013 Update 3 (2013.3) RTM

     昨天微软的Visual Studio 2013 Update 3(Visual Studio 2013.3)正式公布(RTM)了,做为微软认证金牌合作的葡萄城控件,我们组织力量第一时间进行翻译. ...

  8. ORACLE 使用RMAN管理归档日志 archived log

    oracle 归档日志通常使用rman进行管理,作为备份集的一部分 正常情况下,可以根据方法删除 1 过期策略 crosscheck archivelog all; delete expired ar ...

  9. SharePoint 2010 BCS - 简单实例（一）数据源加入

    博客地址 http://blog.csdn.net/foxdave 本篇基于SharePoint 2010 Foundation. 我的数据库中有一个病人信息表Patient,如今我就想把这个表中的数 ...

  10. java--折半查找

    /* 折半查找 */ class TwoSearch { //折半查找可以提高效率,但必须得保证是有序的数组 public static int halfSearch(int[] arr,int ke ...