<!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. [AGC035F]Two Histograms

    Description 你有一个 \(N\) 行.\(M\) 列的.每个格子都填写着 0 的表格.你进行了下面的操作: 对于每一行 \(i\) ,选定自然数 \(r_i\ (0 ≤ r i ≤ M ) ...

  2. luogu 3426题解 （KMP）

    题面 Byteasar 想在墙上涂一段很长的字符,他为了做这件事从字符的前面一段中截取了一段作为模版. 然后将模版重复喷涂到相应的位置后就得到了他想要的字符序列.一个字符可以被喷涂很多次,但是一个位置 ...

  3. Djaon 基于 Ajax 的 json 数据传输

    关键参数:contentType:"application/json" data:JSON.stringify({ json数据 }) 再views.py中,使用request.d ...

  4. Cocos2d-x的Android配置以及相关參考文档

    版权声明:版权声明:本文为博主原创文章.转载请附上博文链接! https://blog.csdn.net/ccf19881030/article/details/24141181     关于Win7 ...

  5. 关于print的一点秀操作

    我们在玩 Python 的时候 常常会使用到 print 这个函数 主要用它来打印一些输出 这样我们可以更加方便的知道 程序的运行情况 我们常常这样操作   不过不是很骚 有时候我们想更加直观的看到我 ...

  6. bzoj1430 小猴打架 prufer 序列

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=1430 题解 prufer 序列模板题. 一个由 \(n\) 个点构成的有标号无根树的个数为 \ ...

  7. python 小工具 重命名当前文件夹内所有的文件，升序命名

    背景:一个朋友想升序重命名他的照片,但是太多了不想手动所以,emememem os这个模块,不用说,rename,filedir等 #conding=utf8 import os path = os. ...

  8. Python---基础---循环，函数

    2019-05-21 ----------------------------------- # 打印出一个矩形# 控制行for i in range(1, 5):    #控制列    for j ...

  9. tar解压命令

    解压 tar –xvf file.tar //解压 tar包 tar -xzvf file.tar.gz //解压tar.gz tar -xjvf file.tar.bz2 //解压 tar.bz2 ...

  10. IndexError: list index out of range的错误原因

    第1种可能情况list[index]index超出范围 第2种可能情况list是一个空的 没有一个元素进行list[0]就会出现该错误 ————————————————版权声明:本文为CSDN博主「m ...