<!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. mybatis CRUD

    方法一:通过配置文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBL ...

  2. float编码杂谈

    浮点数的编码转换采用的是IEEE规定的编码标准,float和double 这两种类型的数据的转换原理相同,但是由于范围不一样,编码方式有些区别.IEEE规定的编码会将一个浮点数转换为二进制数.以科学计 ...

  3. 8，SSO,，eager copy，COW

    针对字符串不同的长度,“编译器”选择不同的优化策略:SSO, eager copy,COW,分别针对短字符串,中等长度字符串,长字符串.不过,现在(2016)的大多数编译器(gcc 4.9.1,vs2 ...

  4. 浅谈USB设备的VID和PID

    根据USB规范的规定,所有的USB设备都有供应商ID(VID)和产品识别码(PID),主机通过不同的VID和PID来区别不同的设备,VID和PID都是两个字节长,其中,供应商ID(VID)由供应商向U ...

  5. Ext JS学习第三天 我们所熟悉的javascript（二）

    •javascript之函数 •对于Ext开发者,我还是希望你能对javascript原生的东西非常了解.甚至熟练掌握运用.那么函数,无疑是非常重要的概念.首先在前面一讲,我们知道了函数也是一种数据类 ...

  6. Android学习之DragEvent

    关于DragEvent Google Android API中是这么说的 Represents an event that is sent out by the system at various t ...

  7. Java调用Oracle存储Package

    Oracle的包Package中可以有很多存储,可通过该包的总调入口在java中直接调用. //java调用oracle的package代码 public boolean cal() throws j ...

  8. java volatile关键字的理解

    转载:http://shmilyaw-hotmail-com.iteye.com/blog/1672779 一个多线程的示例引发的问题 在讨论这个关键字之前先看一个多线程的示例代码: public c ...

  9. Light OJ 1104 Birthday Pardo(生日悖论）

    ime Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu   Description Sometime ...

  10. Ecmall系统自带的分页功能使用

    在控制器如果没有定义相关模型,直接使用sql语句的话,直接使用如下语句. 即: public $db; $this->db = &db(); //然后开始使用分页类 $sql='sele ...