<!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. poj-2516.minimum cost(k次费用流)

    Minimum Cost Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 19883   Accepted: 7055 Des ...

  2. [BZOJ1074] [luogu 4036] [JSOI 2008] 火星人 (二分答案+哈希+fhq treap)

    [BZOJ1074] [luogu 4036] [JSOI 2008] 火星人 (二分答案+哈希+fhq treap) 题面 给出一个长度为n的字符串,m个操作,字符串仅包含小写英文字母 操作1:在k ...

  3. 【题解】Shortest Cycle

    原题链接:CF1205B   题目大意   给定\(n\)个整数\(a_1,a_2,a_3, \dots ,a_n\),若\(i \neq j\)且\(a_i \land a_j \neq 0\),则 ...

  4. 修复线上bug

    1,git branch new_branch 2,git push origin new_branch 以上是线上地址操作,以下是本地仓库操作 3,git fetch 4,git checkout ...

  5. LeetCode106. 从中序与后序遍历序列构造二叉树

    106. 从中序与后序遍历序列构造二叉树 描述 根据一棵树的中序遍历与后序遍历构造二叉树. 注意: 你可以假设树中没有重复的元素. 示例 例如,给出 中序遍历 inorder = [9,3,15,20 ...

  6. nginx负载均衡的搭建和简单例子

    一,nginx 下载地址:http://nginx.org/en/download.html 二,下载对应版本 三,打开下载的安装包:如下图 四,运行nginx.exe 1,这个是时候,程序运行都是一 ...

  7. 放弃等待，故障到来：少一个 await 引发的 tcp 连接泄漏故障

    更新:后来升级至 .NET Core 2.2 Preview 3 ,并将 System.Net.Http 升级至 4.3.4 之后没出现这个问题,问题与 https://github.com/dotn ...

  8. MySQL 简介

    MySQL 简介 点击查看MySQL官方网站 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,后来被Sun公司收购,Sun公司后来又被Oracle公司收购,目前属于Oracle旗 ...

  9. nginx多层反代配置变量proxy_set_header

    Nginx多层反代配置变量proxy_set_header过程记录 第一层代理: (1)路径: $ vim /data/soft/nginx/conf/vhost/xixi.conf (2)内容:(注 ...

  10. RabbitMQ 全套

    本博客代码运行环境 ErLang: ErLang_X64_22 version RabbitMQ: RabbitMQ_Server_3.7.15 version python : Python 3.7 ...