onchange 事件

  1. <body>
  2.     <select id="province" onchange="func1()">
  3.         <option value="shandong">山东</option>
  4.         <option value="hebei">河北</option>
  5.         <option value="beijing">北京</option>
  6.     </select>
  8. </body>
  9. <script>
  10.     function func1(){
  11.         var pro = document.getElementById("province");
  12.         console.log(pro.value)
  13.     }
  14. </script>

使用字典方式添加数据

一级数据显示

  1. <body>
  2.     <select id="province" >
  3.     </select>
  5. </body>
  6. <script>
  7.     data = {"广东省":["广州","佛山"],"北京":["海淀","廊坊"], "海南省":["三亚","海口"]};
  8.     var pro = document.getElementById("province");
  9.     for (var i in data){
  10.         var option_pro = document.createElement("option");
  11.         option_pro.innerHTML=i;
  12.         pro.appendChild(option_pro);
  13.     }
  14. </script>

二级数据联动 方式一

  1. <body>
  2.     <select id="province" onchange="func1(this)" >
  3.     </select>
  4.     <select id="city"></select>
  5. </body>
  6. <script>
  7.     data = {"广东省":["广州","佛山"],"北京":["海淀","廊坊"], "海南省":["三亚","海口"]};
  8.     var pro  = document.getElementById("province");
  9.     var city = document.getElementById("city");
  11.     for (var i in data){
  12.         var option_pro = document.createElement("option");
  13.         option_pro.innerHTML=i;
  14.         pro.appendChild(option_pro);
  15.     }
  17.     function func1(self){
  18.         //console.log((self.options[self.selectedIndex]).innerHTML);
  19.         var choice = (self.options[self.selectedIndex]).innerHTML;
  21.         var options = city.children;
  22.         for (var k=0; k<options.length; k++){
  23.             city.removeChild(options[k--]);
  24.         }
  26.         for (var i in data[choice]){
  27.             var option_city = document.createElement("option");
  28.             option_city.innerHTML = data[choice][i];
  29.             city.appendChild(option_city);
  30.         }
  31.     }
  32. </script>

二级数据联动 方式二

  1. <body>
  2.     <select id="province" onchange="func1(this)" >
  3.     </select>
  4.     <select id="city"></select>
  5. </body>
  6. <script>
  7.     data = {"广东省":["广州","佛山"],"北京":["海淀","廊坊"], "海南省":["三亚","海口"]};
  8.     var pro  = document.getElementById("province");
  9.     var city = document.getElementById("city");
  11.     for (var i in data){
  12.         var option_pro = document.createElement("option");
  13.         option_pro.innerHTML=i;
  14.         pro.appendChild(option_pro);
  15.     }
  17.     function func1(self){
  18.         //console.log((self.options[self.selectedIndex]).innerHTML);
  19.         var choice = (self.options[self.selectedIndex]).innerHTML;
  21.         city.options.length=0;
  23.         for (var i in data[choice]){
  24.             var option_city = document.createElement("option");
  25.             option_city.innerHTML = data[choice][i];
  26.             city.appendChild(option_city);
  27.         }
  28.     }
  29. </script>

js 实现二级联动的更多相关文章

  1. JS制作二级联动

    JS制作二级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  2. js：二级联动示例

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

  3. js实现二级联动下拉列表菜单

    二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下: var deviceNotExist = true;//防止数据重复 if(data ...

  4. 原生js实现二级联动下拉列表菜单

    二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下: var deviceNotExist = true;//防止数据重复 if(data ...

  5. js省市二级联动实例

    //动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  6. js省市二级联动

    html: <script src="js/city.js"></script> ...... <body> <div class=&qu ...

  7. js 省市二级联动

    <html> <head> <meta charset="UTF-8"> <title></title> </he ...

  8. 原生js二级联动

    今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...

  9. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

随机推荐

  1. 吴恩达机器学习笔记31-梯度检验（Gradient Checking）

    当我们对一个较为复杂的模型(例如神经网络)使用梯度下降算法时,可能会存在一些不容易察觉的错误,意味着,虽然代价看上去在不断减小,但最终的结果可能并不是最优解.为了避免这样的问题,我们采取一种叫做梯度的 ...

  2. PyTorch--双向递归神经网络(B-RNN)概念，源码分析

    关于概念: BRNN连接两个相反的隐藏层到同一个输出．基于生成性深度学习,输出层能够同时的从前向和后向接收信息．该架构是1997年被Schuster和Paliwal提出的．引入BRNNS是为了增加网络 ...

  3. 深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局

     1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. e ...

  4. android用OkHttp和okio包通信的坑--气死我了

    今天新建了个项目,想要用用okhttp包来实现Android和tomcat的通信, 于是就根据记忆,把以前可以用的代码复制过来了,然后呢,出现这个.... 图有点大,不知到怎么调小 很莫名其妙,我看了 ...

  5. Java核心技术及面试指南 异常部分的面试题归纳以及答案

    4.2.4.1 throw和throws有什么差别?异常(Exception)和错误(Error)有什么差别? throw语句表示抛出异常,由方法体内的语句处理.throws语句用在方法声明后面,表示 ...

  6. SonarQube 集成 GitLabCI

    本文是用于分析SonarQube代码的质量,每次在GitLab上提交代码时都使用GitLab-CI运行器进行检查. 1.SonarQube with GitLab 安装插件GitLab-plugin ...

  7. Vagrant Ansible Playbook 安装一群虚拟机

    https://docs.ansible.com/ https://favoorr.github.io/2017/01/06/vagrant-virtualbox-vagrantfile-config ...

  8. Android数据保存之文件保存

    前言: 上一篇文章写了在Android中利用SharedPreferences保存数据,SharedPreferences在保存数据的时候主要是保存一些应用程序的设置信息或者少量的用户信息,并且是以k ...

  9. leetcode — maximum-subarray

    /** * * Source : https://oj.leetcode.com/problems/maximum-subarray/ * * Created by lverpeng on 2017/ ...

  10. Python3获取拉勾网招聘信息

    为了了解跟python数据分析有关行业的信息,大概地了解一下对这个行业的要求以及薪资状况,我决定从网上获取信息并进行分析.既然想要分析就必须要有数据,于是我选择了拉勾,冒着危险深入内部,从他们那里得到 ...