<!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. 《剑指offer》面试题18 树的子结构 Java版

    (输入两棵二叉树A和B,判断B是不是A的子结构.补充下,根据书中的代码来看,子结构的定义并不包括叶子节点下的null,也就是说只要B的存在数字的结构存在于A中就行,那么如果B是null树,那么就不属于 ...

  2. HDU-1754 I Hate It(线段树，区间最大值)

    很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.  这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写一个程序,模拟老师的询问.当然,老师 ...

  3. django环境准备学习笔记（三）

    环境准备 创建Django工程 django-admin startproject 工程名 创建 Django 超级用户:python manage.py createsuperuser 1.注释 # ...

  4. ListView鼠标拖

    private Point Position = new Point(0, 0); private void treeFileView_ItemDrag(object sender, ItemDrag ...

  5. MVC一个action对应多个视图的写法

    一,如下代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...

  6. VNware上安装虚拟机Ubuntu16.10 并安装petalinux(版本问题的坑 弃帖 另开一帖)

    1.下载Ubuntu镜像文件 最新版本:https://ubuntu.com/download/desktop 老版本:http://old-releases.ubuntu.com/releases/ ...

  7. java类实现序列化的方法？collection框架中实现什么样的接口

  8. 学习旧岛小程序 （5） observer 函数中修改属性的值

    不要在一个属性的 observer  函数中修改属性的值 不然会造成内存泄露 错误代码: properties: { /* 期刊号 */ index: { type: String, observer ...

  9. thinkphp url和路由

    一.入口模块修改 修改public下的index 加入 define('BIND_MODULE','admin'); 即可将入门模块绑定到admin模块 <?php // [ 应用入口文件 ] ...

  10. WiFi密码新攻击破解方法，黑客攻破只需10秒

    近日,中国知名黑客安全组织东方联盟研究人员透露了一种新的WiFi黑客技术,使黑客更容易破解大多数现代路由器的WiFi密码,并且攻破只需要10秒,速度非常快. 方法是利用由流行的密码破解工具Hashca ...