<!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. Git-第四篇廖雪峰Git教程学习笔记（3）远程仓库，克隆远端库

    1.本次连接的是gitHub仓库. 1>创建SSH Key. ssh-keygen -t rsa -C "youremail@example.com" lfy@lfy-PC ...

  2. dfs（找环）

    https://codeforces.com/problemset/problem/1249/B2 B2. Books Exchange (hard version) time limit per t ...

  3. [BZOJ 2820] YY的gcd(莫比乌斯反演+数论分块)

    [BZOJ 2820] YY的gcd(莫比乌斯反演+数论分块) 题面 给定N, M,求\(1\leq x\leq N, 1\leq y\leq M\)且gcd(x, y)为质数的(x, y)有多少对. ...

  4. 2101 可达性统计（拓扑排序/dfs+状态压缩）

    [题目描述] 给定一张N个点M条边的有向无环图,分别统计从每个点出发能够到达的点的数量.N,M≤30000. [题目链接] 2101 可达性统计 [算法] 拓扑排序之后逆序计算(感觉dfs更好写而且应 ...

  5. CSS3制作的垂直口风琴1

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. C# 图片与Base64的相互转化

    public ActionResult UploadSignature2(string src_data) { Class1.Base64StrToImage(src_data, "C:\\ ...

  7. vue自定义指令获取焦点及过滤器修改时间

    <template id="comp3"> <div id="app"> <model :list="selectedl ...

  8. 解决Vuex刷新页面数据丢失问题 ---- vuex-persistedstate持久化数据

    何为Vuex?用处是什么?为什么刷新丢失? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 ...

  9. select 项目<选课系统>

    """1. 创建北京.上海 2 所学校 学校类对象 属性:名字,地址 行为: 2. 创建linux , python , go 3个课程 , linux\py 在北京开, ...

  10. 机器学习-K-means聚类及算法实现（基于R语言）

    K-means聚类 将n个观测点,按一定标准(数据点的相似度),划归到k个聚类(用户划分.产品类别划分等)中. 重要概念:质心 K-means聚类要求的变量是数值变量,方便计算距离. 算法实现 R语言 ...