<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script type="text/javascript">

             function getEara(){

                 var province=document.getElementById("province").value;

                 if(province=='bj'){

                     document.getElementById("eara").innerHTML=

                 "<option>---请选择---</option><option value='dc'>东城区</option><option value='xc'>西城区</option><option value='xw'>宣武区</option><option value='cy'>朝阳区</option>";

                 }

                 if(province=='sh'){

                     document.getElementById("eara").innerHTML=

                 "<option>---请选择---</option><option value='cn'>长宁区</option><option value='hf'>黄浦区</option><option value='lw'>卢湾区</option><option value='xh'>徐汇区</option>";

                 }

                 if(province=='tj'){

                     document.getElementById("eara").innerHTML=

                 "<option>---请选择---</option><option value='hp'>和平区</option><option value='hd'>河东区</option><option value='hx'>河西区</option><option value='nk'>南开区</option>";

                 }

             }

             function getCity(){

                 var cityArr=new Array(12);

                 cityArr[0]=new Array("东城区01","东城区02","东城区03","东城区04");

                 cityArr[1]=new Array("西城区01","西城区02","西城区03","西城区04");

                 cityArr[2]=new Array("宣武区01","宣武区02","宣武区03","宣武区04");

                 cityArr[3]=new Array("朝阳区01","朝阳区02","朝阳区03","朝阳区04");

                 cityArr[4]=new Array("长宁区01","长宁区02","长宁区03","长宁区04");

                 cityArr[5]=new Array("黄浦区01","黄浦区02","黄浦区03","黄浦区04");

                 cityArr[6]=new Array("卢湾区01","卢湾区02","卢湾区03","卢湾区04");

                 cityArr[7]=new Array("徐汇区01","徐汇区02","徐汇区03","徐汇区04");

                 cityArr[8]=new Array("和平区01","和平区02","和平区03","和平区04");

                 cityArr[9]=new Array("河东区01","河东区02","河东区03","河东区04");

                 cityArr[10]=new Array("河西区01","河西区02","河西区03","河西区04");

                 cityArr[11]=new Array("南开区01","南开区02","南开区03","南开区04");

                 var eara=document.getElementById("eara").value;

                 var city=document.getElementById("city");

                 var j;

                 if(eara=="dc"){

                     j=0;

                 }

                 if(eara=="xc"){

                     j=1;

                 }

                 if(eara=="xw"){

                     j=2;

                 }

                 if(eara=="cy"){

                     j=3;

                 }

                 if(eara=="cn"){

                     j=4;

                 }

                 if(eara=="hf"){

                     j=5;

                 }

                 if(eara=="lw"){

                     j=6;

                 }

                 if(eara=="xh"){

                     j=7;

                 }

                 if(eara=="hp"){

                     j=8;

                 }

                 if(eara=="hd"){

                     j=9;

                 }

                 if(eara=="hx"){

                     j=10;

                 }

                 if(eara=="nk"){

                     j=11;

                 }

                 city.options.length=1;

                 for(var i=0;i<cityArr[i].length;i++){

                         var cityText=document.createTextNode(cityArr[j][i]);

                         var newNode=document.createElement("option");

                         newNode.appendChild(cityText);

                         city.appendChild(newNode);

                 }

             }

         </script>

     </head>

     <body>

         <div align="center" >

         请选择地址

             <select id="province" onchange="getEara()">

                 <option>---请选择---</option>

                 <option value="bj">北京</option>

                 <option value="sh">上海</option>

                 <option value="tj">天津</option>

             </select>

             <select id="eara" onchange="getCity()">

                 <option>---请选择---</option>

             </select>

             <select id="city">

                 <option>---请选择---</option>

             </select>

         </div>

     </body>

 </html>

js三级内联的更多相关文章

  1. JS获取内联样式

    JS获取内联样式 //获取内联样式 function getCss(obj,attr){//obj:对象,name:style属性 if(obj.currentStyle) { return obj. ...

  2. Vue.js style(内联样式)

    Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <div id="app"> <div v-bind:style=&q ...

  3. js的内联和外部调用

    如上代码(实现轮播图的部分代码),若以内联形式写在html里,就不会出现异常.但是如果放在外部js文件中,并在html的head中调用,就会出现异常(不报错,但是轮播逻辑出现异常). 解决:不使用全局 ...

  4. vue.js中内联样式style三元表达式

    <span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >搜索</span&g ...

  5. Vue.js绑定内联样式

    1.对象语法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  6. 页面上使用 Thymeleaf 的内联js不当造成了 java.lang.StackOverflowError: null 问题

    由于在页面上内联js使用不当,从而在从 Controller 跳转到页面时发生了以下错误: java.lang.StackOverflowError: null at org.thymeleaf.ut ...

  7. js和css内联外联注意事项

    简单说:这两个问题其实是同一个问题,但是网上找了好久也找不到方法,外联的js和css文件里不能有任何HTML的标记注释,一旦有,浏览器就疯了!一去掉就好了!!! 问题:起因是网上看到一个css的表格样 ...

  8. 内联样式自动出现，一般是js控制写入的

    内联样式自动出现,一般是js控制写入的

  9. 初探内联方式的 onload="doSomething()"为何要加"()"？而js代码的 onload="doSomething" 和 addEventListener 为何不加"()"？

    问题引入:在看<Jquery基础教程>第四版的时,P34页有这样一段话 引用函数与调用函数 这里在将函数指定为处理程序时,省略了后面的圆括号,只使用了函数名.如果带着圆括号,函数会被立即调 ...

随机推荐

  1. LeetCode 109. 有序链表转换二叉搜索树（Convert Sorted List to Binary Search Tree）

    题目描述 给定一个单链表,其中的元素按升序排序,将其转换为高度平衡的二叉搜索树. 本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1. 示例: 给定的有序链表: ...

  2. HttpServletRequest中getRemoteUser和getUserPrincipal方法

    HttpServletRequest是一个接口类,继承自ServletRequest,并且又新增了许多抽象方法,getRemoteUser()方法和getUserPrincipal()方法就在其中.许 ...

  3. MVC模式入门案例

    import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widg ...

  4. PHP中获取当前页面的完整URL、PHP URL处理、获取不带扩展名的文件名

    javascript实现: top.location.href 顶级窗口的地址this.location.href 当前窗口的地址 PHP实现 #测试网址: http://localhost/blog ...

  5. OpenStack 的单元测试

    目录 文章目录 目录 前言 单元测试能提高生产率 Python 单元测试工具清单 unittest Test Discover Test Fixture Test Suite Assert(断言) m ...

  6. 阶段3 3.SpringMVC·_07.SSM整合案例_08.ssm整合之Spring整合MyBatis框架

    service能供成功的调用到service对象就算是整合成功 如果能把生成的代理对象也存大IOC的容器中.那么ServiceImpl就可以拿到这个对象 做一个注入,然后就可以调用代理对象的查询数据库 ...

  7. char与varchar的区别

    char的长度是不可变的,而varchar的长度是可变的,也就是说, 定义一个char[10]和varchar[10],如果存进去的是‘csdn’, 那么char所占的长度依然为10, 除了字符‘cs ...

  8. openstack共享组件--rabbitmq消息队列（1）

    一.MQ 全称为 Message Queue, 消息队列( MQ ) 是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们. 消息传 ...

  9. Java split(".") 和 split("\\.")

    Java split(".") 和 split("\\.") 问题描述 使用 . 分解 IP 的各个段,并打印,如:192.168.10.123,分解为 192 ...

  10. Python Deque 模块使用详解,python中yield的用法详解

    Deque模块是Python标准库collections中的一项. 它提供了两端都可以操作的序列, 这意味着, 你可以在序列前后都执行添加或删除. https://blog.csdn.net/qq_3 ...