利用js的数组制作二级联动

前面的博客我们讲解js的数组及相关属性和方法，今天我们来说一下如何利用js的数组制作二级联动效果。当然，说到二级联动，跳不过的就是多维数组。

1.多维数组

    // 多维数组：数组作为数组的项// 二维数组   两层数组// 二维数组的创建var arr=[1,2,3,4];//一维数组// 1.字面量方式声明var arr2=[[1,2,3],[1,2,3],[4,5,6]];// 2. 采用构造函数   使用 new 关键字var arr3=new Array([1,2,3],[4,5,6],[7,8,9]);// 3.先声明 后赋值var arr4=new Array();arr4[0]=["a","b","c"];arr4[1]=["o","p","q"];console.log(arr2);console.log(arr3);console.log(arr4);// 三维数组var arr5=[[[1,2,3],[4,5,6]],["a","b"]];console.log(arr5);// 二维数组的访问console.log(arr2[0][0]);arr2[0][0]="hello";console.log(arr2);

2.二维数组的遍历

    // 一维数组的遍历for(var i=0;i<arr.length;i++){console.log(arr[i]);}// var arr3=new Array([1,2,3],[4,5,6],[7,8,9]);// 如何遍历二维数组for(var m=0;m<arr3.length;m++){// console.log(arr3[m]);for(var n=0;n<arr3[m].length;n++){console.log(arr3[m][n])}}

3.二级联动

二级联动，简单来说就是要通过一个下拉列表的选项选中，从而在另一个select下拉列表中显示出对应的数据。比如我们出去旅游，在网订酒店，先选择省份，然后会显示出省份下所对应的城市。

html代码：

    <form name="form1" action="" method="get"><select id="a1" onchange="addOption()"></select><select id="a2"></select></form>

JavaScript代码：

    var city = new Array;        city['江苏'] = ['南京', '连云港', '苏州', '镇江'];        city['山东'] = ['青岛', '烟台', '济南'];         function allCity() {            var select1 = document.getElementById("a1");            for(var i in city) {  //这里注意遍历数组的写法select1.add(new Option(i, i), null);}   addOption(); // 初始化选项     }        function addOption() {            var select2 = document.getElementById("a2");var select1 = document.getElementById("a1").value; select2.length = 0; //每次都先清空一下市级菜单  if(select1 != '请选择省份') {                for(var i in city[select1 ]) {    select2.add(new Option(city[select1][i], city[select1][i]), null);                }            }else if (sheng == '请选择省份'){              select2.length = 0;           select2.add(new Option("请选择城市", "请选择城市"), null); }      }       allCity();

利用js的数组制作二级联动相关推荐

html中免费的四级联动,利用JS实现省市区街道四级联动插件
特效描述:利用JS实现省市区街道四级联动插件.利用JS实现省市区街道四级联动插件代码结构 1. 引入CSS 2. 引入JS 3. HTML代码所在地区所在地区请选择请选择请选择请选择 ...
利用js和jquary制作轮播图
1 问题我们在浏览淘宝或者京东等其他网页时,可以发现,在它们的首页有一个方框,里面的图片是自动播放的.而今天就是利用js和jquary制作这种具有轮播效果的图片. 2 方法首先使用<div& ...
html省市二级简单联动,JS实现简单省市二级联动
刚始学习java刚好看到用js实现省市二级联动的效果,就想着写篇博客,顺便检验下自己的学习成果. 好了废话少说先看看实际效果: 技术分析: 要实现这个功能呢,首先要用到html+js 这里用建一个下拉 ...
前端利用js里数组的filter方法进行多条件过滤查询
需求:用户在输入框输入多个条件时,可以对表格数据进行过滤查询,无需后端接口处理,利用了前端js里数组的filter方法进行过滤. 如下是效果图: 当用户在姓名的输入框里输入"张"后 ...
下拉默认选择_在Excel中制作二级联动下拉菜单，太有用了
对于一级下拉菜单的设置,相信经常使用Excel的用户都不陌生,那么,二级联动下拉菜单又是什么呢?与一级下拉菜单有什么关系呢? 二级联动下拉菜单是根据一级下拉菜单内容的变化而变化的.大家都知道,不同的部 ...
Excel 轻松制作二级联动下拉列表清单
在做二级联动过程中需要用到一个函数: INDIRECT() 返回文本字符串所指定的引用语法 INDIRECT(ref_text,a1) Ref_text: 单元格引用,该引用所指向的单元格中存放有对 ...
php js下拉框与文本联动,php mysql js 下拉框二级联动
JS代码 function changeappid(){ var appid=document.getElementById("appid").value; $result = T ...
c语言利用二维数组制作地图,用程序实现RPG背景地图二维数组构建
朱艳萍摘要:该文主要阐述了前端RPG开发中,当作为背景的地图较为复杂时,如何用程序的方法构建与背景地图一致的二维数组,采用图文结合论述其算法,并使用原生JavaScript语言实现. 关键词:二维数 ...
html省市多级联动下拉框,基于javascript实现全国省市二级联动下拉选择菜单
本文实例讲述了js实现全国省市二级联动下拉选择菜单,分享给大家供大家参考.具体如下: 效果图: 具体代码: 无标题文档 //好像不是这样子 var arr_province = ["请选择省 ...

利用js的数组制作二级联动

利用js的数组制作二级联动

1.多维数组

2.二维数组的遍历

3.二级联动

利用js的数组制作二级联动相关推荐

最新文章

热门文章