Javascript知识【省市二级联动】重点

简介: 省市两级联动案例

省市二级联动(后续三级联动)

分析:


关键点:


域的值被改变时: onchange

<!--

   select框的value 取决于: 选中了哪个option,取的是该option的value值


   只有值的内容发生改变时,才能触发该事件

-->

<select id="province" style="width:150px" onchange="alert(this.value)">

   <option value="">----请-选-择-省----</option>

   <option value="0">北京</option>

   <option value="1">吉林省</option>

   <option value="2">山东省</option>

   <option value="3">河北省</option>

   <option value="4">江苏省</option>

</select>


数据源是二维数组。(取值方式等同于java)

<script>

  // 定义二维数组,存储城市信息

  var cities = new Array();

  cities[0] = new Array("海淀区","房山区","朝阳区");

  cities[1] = new Array("长春市","吉林市","松原市","延边市");

  cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");

  cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");

  cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");


  //取值:  二维数组[大数组索引][小数组索引];

  alert(cities[4][3]);

</script>



下拉框内容体改变。innerHTML="";

步骤:


//1、页面加载完成时,为省 下拉框绑定 onchange事件


//2、onchange事件中,获取当前省 下拉框的value值


//3、以value值作为索引,获取城市列表


//4、获取市 下拉框对象 city


//5、对city数据进行初始化,回归初始状态


//6、遍历城市列表,每遍历一个城市,拼接一个option,追加到city标签内容体末尾


代码实现:

<script>

  // 定义二维数组,存储城市信息

  var cities = new Array();

  cities[0] = new Array("海淀区","房山区","朝阳区");

  cities[1] = new Array("长春市","吉林市","松原市","延边市");

  cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");

  cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");

  cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");

  //1、页面加载完成时,为省 下拉框绑定 onchange事件

  window.onload = function (ev) {

     //2、onchange事件中,获取当前省 下拉框的value值

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

     province.onchange = function (ev1) {

        //3、以value值作为索引,获取城市列表

        var arr = cities[this.value];

        //4、获取市 下拉框对象 city

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

        //5、对city数据进行初始化,回归初始状态

        city.innerHTML = "<option value=\"\">----请-选-择-市----</option>";

        //6、遍历城市列表,每遍历一个城市,拼接一个option,追加到city标签内容体末尾

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

           var option = "<option>"+arr[i]+"</option>";

           city.innerHTML+=option;

        }

     };

  };


</script>


1,域的值被改变时:onchange


2,数据源是二位数组。(取值方式等同于java)


3,下拉框内容体改变。innerHTML=“”。


相关文章
|
前端开发 JavaScript
前端基础 - JavaScript之省市联动简单案例
前端基础 - JavaScript之省市联动简单案例
116 0
|
JavaScript 前端开发
Javascript知识【案例:重写省市联动&案例:列表左右选择】
Javascript知识【案例:重写省市联动&案例:列表左右选择】
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
1053 0
|
JavaScript 前端开发 定位技术
百度地图JavaScript API使用Boundary方法添加覆盖物显示省市某一区域的解决方案
百度地图JavaScript API使用Boundary方法添加覆盖物显示省市某一区域的解决方案
576 0
|
JavaScript 前端开发 Java
javascript原生实现二级联动下拉菜单
JS原生实现二级联动菜单(市/区县) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
402 0
javascript原生实现二级联动下拉菜单
|
JavaScript 前端开发
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: &lt;!-- &lt;input type=&quot;text&quot; id=&quot;text&quot;&gt; --&gt; 请选择省份: &lt;select name=&quot;&quot; id=&quot;provinces&quot;&gt; &lt;!-- &lt;option value=&quot;江苏省&quot;&gt;江苏省&lt;/option&gt;
|
JavaScript 前端开发
JavaScript(js)隔行换色,省市二级联动,全选,全不选,反选
JavaScript(js)隔行换色,省市二级联动,全选,全不选,反选
213 0
|
JavaScript 前端开发
【JavaScript】案例 :复选框全选-全不选&省市二级联动以及课外扩展
本期主要介绍案例 :复选框全选-全不选&省市二级联动以及课外扩展
123 0
【JavaScript】案例 :复选框全选-全不选&省市二级联动以及课外扩展
|
JavaScript 前端开发
javascript原生实现二级联动下拉菜单
JS原生实现二级联动菜单(市/区县)
javascript原生实现二级联动下拉菜单

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    45
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    28
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55