<!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. 转：说说angularjs中的$parse和$eval

    说说AngularJS中的$parse和$eval AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval. ...

  2. Protel99se教程九:protel99se中PCB设计的高级应用

    在上一节我们PCB资源网的protel99se教程当中,我们给大家讲解了在protel99se进行原理图设计中的一些高级应用技巧,在这一节protel99se教程当中,我们将给大家讲解的是,在prot ...

  3. Qt实现16进制unicode转utf-8以及国际音标编码问题

    由于项目需要,需要对网络资源进行解码.遇到编码问题.研究了下基本编码原理.于是有了下面两个通用代码 1. 16进制unicode转换为utf-8中文显示 QString unicodeToUtf_8( ...

  4. View中的onTouchEvent()与setOnTouchListener()中的ontouch()方法的事件处理先后顺序

    Touch事件的两种情况 1.覆写View.class中定义的onTouchEvent-->基于事件回调监听方式 @Override public boolean onTouchEvent(Mo ...

  5. 学习MVC遇到的问题

    修改电脑上的DNS配置: Opendns 首选DNS服务器和备用DNS服务器分别设置为208.67.222.222和208.67.220.220 google的8.8.8.8 首选DNS服务器和备用D ...

  6. A.归并排序

    归并排序 (求逆序数) 归并排序:递归+合并+排序 时间复杂度:O(n logn)    空间复杂度:O(n) 用途:1.排序  2.求逆序对数 Description In this problem ...

  7. [LeetCode]题解（python）：019-Remove Nth Node From End of List

    题目来源: https://leetcode.com/problems/remove-nth-node-from-end-of-list/ 题意分析: 这道题是给定一个链表,删除倒数第n个节点.提醒, ...

  8. QString::toLocal8Bit得听QTextCodec::codecForLocale的

    这个函数用了这么久,到今天程序出错才发现这个问题...也就是说,必须设置QTextCodec *codec = QTextCodec::codecForName("System") ...

  9. [WPF疑难]Hide me! not close

    原文 [WPF疑难]Hide me! not close [WPF疑难]Hide me! not close                               周银辉 有朋友遇到这样的一个问 ...

  10. Tomcat中配置自定义404错误页面

    404,50x这种错误经常遇到. 如果%CATALINA_HOME%\conf\web.xml和具体应用中都有设置%CATALINA_HOME%\webapps\ROOT\WEB-INF\web.xm ...