文档章节

简单的一个用javascript做的'省市区'三级联动效果

喝豆浆不放糖
 喝豆浆不放糖
发布于 2014/04/12 14:17
字数 681
阅读 2164
收藏 10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>javascript简单三级联动效果</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<script>
    var oProc=new Array("四川省","湖南省","广东省");//随意选择三个省,如需更多,添加便是
    var oCity=new Array();//创建一个数组,用以存放市选择项
    oCity[0]=new Array("成都市","绵阳市","达州市");
    oCity[1]=new Array("长沙市","常德市","湘潭市");
    oCity[2]=new Array("广州市","深圳市","珠海市");
    var oDist=new Array();//创建一个数组,用于存放市级以下的各个区县
    oDist[0]=new Array();//这是必须声明的一项,否则会报异常
    oDist[1]=new Array();
    oDist[2]=new Array();
    oDist[0][0]=new Array("武侯区","锦江区","金牛区");
    oDist[0][1]=new Array("梓潼县","安县","罗江县");
    oDist[0][2]=new Array("达县","通川县","宣汉县");
    oDist[1][0]=new Array("长沙区","开福区","芙蓉区");
    oDist[1][1]=new Array("武陵区","鼎城区","汉寿县");
    oDist[1][2]=new Array("湘潭县","雨湖区","岳塘区");
    oDist[2][0]=new Array("白云区","天河区","黄埔区");
    oDist[2][1]=new Array("罗湖区","宝安区","福田区");
    oDist[2][2]=new Array("香洲区","金湾区","斗门区");
    //加载完成时,执行
    function showLoad(){
        var oproc=document.getElementById("proc");
        for(var i=0;i<oProc.length;i++){
            var oOpt=document.createElement("option");
            var oTxt=document.createTextNode(oProc[i]);
            oOpt.appendChild(oTxt);
            oproc.appendChild(oOpt);
        }
    }
    //当“proc”发生change事件时,执行
    function showCity(){
        var oproc=document.getElementById("proc");
        var ocity=document.getElementById("city");
        var odist=document.getElementById("dist");
        if(oproc.value=="-1"){//判断,当未选择时。将市级,区级中的内容清空
            ocity.options.length=1;
            odist.options.length=1;
        }else{
            ocity.options.length=1;
            odist.options.length=1;
            var num=oproc.options.selectedIndex;
            for(var i=0;i<oCity[num-1].length;i++){//循环加入数据
                var oOpt=document.createElement("option");
                var oTxt=document.createTextNode(oCity[num-1][i]);
                oOpt.appendChild(oTxt);
                ocity.appendChild(oOpt);
            }
        }

    }
    //当“city”发生change事件时,执行
    function showDist(){
        var oproc=document.getElementById("proc");
        var ocity=document.getElementById("city");
        var odist=document.getElementById("dist");
        if(ocity.value=="-1"){//判断,当未选择时。将区级中的内容清空
            odist.options.length=1;
        }else{
            odist.options.length=1;
            var numPro=oproc.options.selectedIndex;
            var numCity=ocity.options.selectedIndex;
            for(var i=0;i<oDist[numPro-1][numCity-1].length;i++){
                var oOpt=document.createElement("option");//创建一个option元素节点
                var oTxt=document.createTextNode(oDist[numPro-1][numCity-1][i]);//创建一个文本节点
                oOpt.appendChild(oTxt);//将文本节点加入到oOpt元素节点中
                odist.appendChild(oOpt);//将oOpt元素节点添加到odist中
            }
        }
    }
</script>
<body onload="showLoad()"><!-- 页面加载完成时,初始化省选择项 -->
<div>
    请选择地区:
    <select id="proc" onchange="showCity()">
        <option value="-1">--请选择省--</option>
    </select>
    <select id="city" onchange="showDist()" >
        <option value="-1">--请选择市--</option>
    </select>
    <select id="dist">
        <option value="-1">--请选择区--</option>
    </select>
</div>
</body>
</html>

        其实要真正做上一个‘’省市区级‘’的三级联动,所需的数据还多,只需向数组中添加数据就OK了。

© 著作权归作者所有

喝豆浆不放糖
粉丝 1
博文 3
码字总数 2286
作品 0
成都
高级程序员
私信 提问
javaWeb数据库动态加载全国省市区三级联动

demo源码下载地址:https://git.oschina.net/zhengweishan/GetProvinceCityArea 首先声明一下,全国省市区三级联动有很多的插件。没有必要这么麻烦的把省市区存到数据库,然后再获取。这样缺...

火龙战士
2015/04/16
17.3K
8
xaboy/form-builder

form-builder PHP表单生成器,快速生成现代化的form表单。包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能。 表单是使用...

xaboy
2018/06/27
0
0
crmeb电商系统 PHP快速生成表单,支持表单验证

form-builder PHP表单生成器,快速生成现代化的form表单。包含复选框、单选框、输入框、下拉选择框等元素以及省市区三级联动、时间选择、日期选择、颜色选择、树型、文件/图片上传等功能。 ...

阿里源码
03/17
0
0
PHP 表单生成器 - form-builder

form-builder PHP表单生成器,快速生成现代化的form表单。包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能。 表单是使用...

xaboy
2018/06/26
5.9K
4
引用provinces.js的三级联动

第一次写随笔 应该写的不是太好 请多多见谅 我这次是在网上发现了一个三级联动 也是给新人一个福利 这个是你需要新建个 JavaScript 文件 并复制到你新建的文件里面 2 { 3 "name": "北京市", ...

糊涂话
2018/12/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

手写RPC框架指北另送贴心注释代码一套

Angular8正式发布了,Java13再过几个月也要发布了,技术迭代这么快,框架的复杂度越来越大,但是原理是基本不变的。所以沉下心看清代码本质很重要,这次给大家带来的是手写RPC框架。 完整代码...

全菜工程师小辉
4分钟前
0
0
【Java】开发收货

简介 谨以此篇,记载开发过程中的一些tips。 编译器 【Shift + F6】可实现变量的联动修改。

Areya
21分钟前
2
0
DOM官方定义

DOM Document Object Model 文档对象模型 DOM的官方定义:W3C的DOM,可以使程序或者脚本(JS或AS\JScript),动态的访问或者操作文档的内容、结构、样式。 DOM只是一个标准,操作网页的标准。...

前端老手
27分钟前
4
0
IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词。需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱。另外,前端开发也会细分很多个开...

老码农的一亩三分地
28分钟前
4
0
可见性有序性,Happens-before来搞定

写在前面 上一篇文章并发 Bug 之源有三,请睁大眼睛看清它们 谈到了可见性/原子性/有序性三个问题,这些问题通常违背我们的直觉和思考模式,也就导致了很多并发 Bug 为了解决 CPU,内存,IO ...

tan日拱一兵
44分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部