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之省市联动简单案例
176 0
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
1539 0
|
JavaScript 前端开发
Javascript知识【案例:重写省市联动&案例:列表左右选择】
Javascript知识【案例:重写省市联动&案例:列表左右选择】
|
JavaScript 前端开发 定位技术
百度地图JavaScript API使用Boundary方法添加覆盖物显示省市某一区域的解决方案
百度地图JavaScript API使用Boundary方法添加覆盖物显示省市某一区域的解决方案
792 0
|
JavaScript 前端开发 Java
javascript原生实现二级联动下拉菜单
JS原生实现二级联动菜单(市/区县) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
490 0
javascript原生实现二级联动下拉菜单
|
JavaScript 前端开发
【JavaScript】案例 :复选框全选-全不选&省市二级联动以及课外扩展
本期主要介绍案例 :复选框全选-全不选&省市二级联动以及课外扩展
206 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)隔行换色,省市二级联动,全选,全不选,反选
297 0
|
JavaScript 前端开发
javascript原生实现二级联动下拉菜单
JS原生实现二级联动菜单(市/区县)
javascript原生实现二级联动下拉菜单

热门文章

最新文章