<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title></title>

</head>

<body>

<select id="one">

  <option>请输入省份</option>

</select>

<select id="two">

  <option>请输入市</option>

</select>

<select id="three">

  <option>请输入区</option>

</select>

<script type="text/javascript">

  var oone=document.getElementById("one");

  var otwo=document.getElementById("two");

  var three=document.getElementById("three");

  var str='';

  otwo.disabled=true;

  three.disabled=true;

  var arr1=[{"id":"","value":"北京"},{"id":"","value":"上海"},{"id":"","value":"重庆"},{"id":"","value":"天津"},{"id":"","value":"山东"}];

  for(var i=;i<arr1.length;i++){

    str+="<option value="+arr1[i].id+">"+arr1[i].value+"</option>"

  }

  oone.innerHTML=str;

  var arr2 = {

    '':['101@北京'],

    '':['201@上海'],

    '':['301@重庆'],

    '':['401@天津'],

    '':['501@济南','502@青岛']  };

  oone.onchange=function(){

    var val=this.value;

      console.log('val',val)

    var arrA = arr2[val];

      console.log('arrA',arrA)

    var str1='<option>请输入市</option>';

    for(var j=;j<arrA.length;j++){

      var aaa=arrA[j].split('@');

      str1+="<option value="+aaa[]+">"+aaa[]+"</option>"

    }

    otwo.innerHTML=str1;

    otwo.disabled=false;

    three.innerHTML='<option>请输入区</option>';

    three.disabled='disabled';

  }

  var arr3 = {

    '':['朝阳区','昌平区'],

    '':['宝山区','浦东区'],

    '':['不知道'],

    '':['真的不知道'],

    '':['市中区','历下区','槐荫区'],

    '':['市南区','市北区','崂山区']  };

  otwo.onchange = function(){

    var val=this.value;

    console.log( this.value);

    var str2='<option>请输入区</option>';

    console.log(val)

    for(var l=;l<arr3[val].length;l++){

      str2+="<option >"+arr3[val][l]+"</option>"

    }

    three.innerHTML=str2;

    three.disabled=false;

  }

</script>

</body>

</html>

截图如下：

简单的三级联动demo的更多相关文章

  1. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

  2. 省市区三级联动——思路、demo、示例

    说明(2017-12-13 11:03:58): 1. 这个功能应该是注册的时候非常.常用的了,不过现在都是微信登录,手机端自动获取位置什么的,可能就网站还用用吧! 2. 这个东西的难点在于统计各地省 ...

  3. 简单jquery实现select三级联动

    简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...

  4. 省市区三级联动（二）JS部分简单版

    通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的 ...

  5. 简单的纯js三级联动

    参考这个  日尼禾尔  二级联动 写了三级联动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  6. 非常不错的地区三级联动，js简单易懂。封装起来了

    首先需要引入area.js,然后配置并初始化插件: 例: <!-- 绑定银行卡开始 --> <script src="js/area.js"></sc ...

  7. 用jsp实现省市区三级联动下拉

    jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善 ...

  8. android：省市县三级联动（基于json和spring）

    一.请看效果图": 二.程序的代码: 1.MainActivity.java package com.loveplusplus.loader.demo.ui; import org.json ...

  9. 省市区三级联动 pickerView

    效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...

随机推荐

  1. HDU 6432(不连续环排列 ~)

    题意是说在长度为 n 的环排列中,按照一定的方向(顺时针或逆时针),后一个数不能仅比前一个数大 1 , n 的下一个数不能是 1 ,问这种长度为 n 且本质不同(本质不同指环上数字的相对位置不同,如 ...

  2. ASP.NET MVC+EF框架+EasyUI实现权限管理(附源码)

    前言:时间很快,已经快到春节的时间了,这段时间由于生病,博客基本没更新,所以今天写一下我们做的一个项目吧,是对权限的基本操作的操作,代码也就不怎么说了,直接上传源码和图片展示,下面我们直接进入主题介绍 ...

  3. SpringBoot系列: Redis 共享Session

    Web项目Session管理是一个很重要的话题, 涉及到系统横向扩展, SpringBoot已经为共享Session很好的解决方案, 这篇文章关注使用Redis共享会话, 同时这也是最常用的方法. = ...

  4. js 日期 相关

    Js计算指定日期加上多少天.加多少月.加多少年的日期 function DateAdd(interval, number, date) { switch (interval) { case " ...

  5. Django之CRM项目Day3-客户展示及分页

    1.展示客户 模板的查找顺序: ​ 先找全局的templates--> 按照app的注册顺序找templates中的文件 使用admin添加数据: 创建超级用户 python manage.py ...

  6. ORA-01882 timezone region not found

    解决方案有2个 1.在java运行环境中添加配置,制定时区 -Duser.timezone=GMT 2.修改系统时区 linux 下 1. 查看当前时区 date -R 2. 修改设置时区 方法(1) ...

  7. python 的基础 学习 第四天 基础数据类型

    1,数字 int 数字主要是用于计算,使用方法并不是很多,就记住一种就可以. #bit_length() 当十进制用二进制表示时,转化为最少二进制的最少位数v = 11data = v.bit_len ...

  8. springboot-全局异常处理类

    @ControllerAdvice public class GlobalExceptionHandler(){ @ExceptionHandler(value=Exception.class) @R ...

  9. ES6走一波 字符串的扩展

    ES6字符串扩展: 处理大码点字符 字符的Unicode表示法 \uxxxx表示一个字符串,超出 \u0000 ~ \uffff范围,必须用两个双字节形式表示. ES6改进为 将码点放到大括号 可正确 ...

  10. day 8 - 2 文件操作练习

    注册登录 需求: 1.对账号密码的长度进行限制并不允许出现特殊字符 2.把账号密码储存进文件中 3.密码最多输入错误三次 #分别判断注册时账号密码的长度与特殊字符 flag=1 while flag: ...