<!doctype html>

 <html>

     <head>

     <meta charset="UTF-8">

     <title>HTML--JS 二级联动</title>

     <script language="javascript">

         var cities=[

             ["山东省","青岛市","济南市","威海市"],

             ["安徽省","合肥市","阜阳市","亳州市"],

             ["河南省","郑州市","新乡市","洛阳市"]

         ];

         function show(val){

             for(i=0;i<cities.length;i++){ //循环遍历，一维数组长度

                 if(cities[i][0]==val){  //一维数组下标为0的元素即省 与下拉菜单值比较

                     document.getElementById("city").length=1;  // city 长度设为1

                     for(j=1;j<cities[i].length;j++){ //循环遍历，二维数组长度

                         document.getElementById("city").add(

                         new Option(cities[i][j]));  //给city赋新cities选出的值

                     }

                 }

             }

         }

     </script>

     </head>

     <body>

         <form action="" method="post" name="myform">

         地区:

         <select name="area" onchange="show(this.value)" >

             <option value="0">=请选择=</option>

             <option value="山东省">山东省</option>

             <option value="安徽省">安徽省</option>

             <option value="河南省">河南省</option>

         </select>

         <select id="city">

             <option value="0">=请选择=</option>  <!--此处一个长度-->

         </select>

         </form>

     </body>

 </html>

HTML--JS 二级联动的更多相关文章

  1. 原生js二级联动

    今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...

  2. Ext.js二级联动

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href ...

  3. js二级联动

    <body> <section> <a>省份</a> <select id="province"> <option ...

  4. js 二级联动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. xml+js+html的二级联动

    首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市 内容如下: <?xml version="1.0" encoding="U ...

  6. 省市二级联动--使用app-jquery-cityselect.js插件

    只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...

  7. JS实现下拉单的二级联动

    因工作需要,做了一个下拉单的二级联动. 第一级是固定的选项,有A.B两个选项,第二级的选项随着第一级选项的变化而变化. 一开始是这样的: HTML代码 <html> <head> ...

  8. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

  9. js：二级联动示例

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

  10. js小例子之二级联动

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

随机推荐

  1. Eclipse解除已关联的Coding远程仓库，重新关联github上的远程仓库

    1.在Eclipse中的Git Repositories中找到要解除的仓库,依次找到Remote--origin[视自己的实际情况选择], 2.选中origin,右键选择Delete Remote , ...

  2. Latex--入门系列一

    Latex 专业的参考 tex对于论文写作或者其他的一些需要排版的写作来说,还是非常有意义的.我在网上看到这个对于Latex的入门介绍还是比较全面的,Arbitrary reference .所以将会 ...

  3. vue.js（10）--案例--列表增加与删除

    品牌管理案例 (1)bootstrip快速布局 <div class="app"> <div class="panel panel-primary&qu ...

  4. Composer简介与下载安装

    简介: 初次接触Composer的PHP程序员可能是需要下载ThinkPHP框架(5.1),那么什么是Composer,怎么下载安装呢? Composer是一个依赖管理工具,下载管理第三方包是其主要功 ...

  5. alert(1) to win 14

    <!--<script></script>之间的内容会被当作js处理,所以,//we'll use this later </script>被注释了.最终 i ...

  6. Mysqldump导入数据库很慢的解决办法

    https://blog.csdn.net/xizaihui/article/details/53103049 1.MySQLdump导出的SQL语句在导入到其他数据库的时候会相当慢,甚至几十秒才处理 ...

  7. 【leetcode】1037. Valid Boomerang

    题目如下: A boomerang is a set of 3 points that are all distinct and not in a straight line. Given a lis ...

  8. Oracle12c修改时区

    Oacle12c支持可插入数据库(PDB)在一个统一的数据库(CDB)中具有不同的字符集.时区文件版本和数据库时区. 出于性能原因,Oracle建议将数据库时区设置为UTC(0:00),因为不需要转换 ...

  9. java Main方法 获取 maven 的resource 下的xml文件

    Properties properties = new Properties(); File file = new File("src/main/resources/generator.xm ...

  10. nginx配置虚拟主机-端口号区分/域名区分

    Nginx实现虚拟机 可以实现在同一台服务运行多个网站,而且网站之间互相不干扰.同一个服务器可能有一个ip,网站需要使用80端口.网站的域名不同. 区分不同的网站有三种方式:ip区分.端口区分.域名区 ...