发表于: 2016-10-20 00:27:08
1 1940
最后几次在官网写日报了
今天完成的事情:1.二级联动分享2.图片上传分享3.angular二级联动4.面试题5.在汇智网上重新看了一遍angular
明天计划的事情:按照师兄说的,闭包,原型链,构造器一个个看过去
收获:
如何使用原生js写一个简单的二级联动
首先二级联动的原理其实很简单,只是一个小demo, 可能写这个的时间比我自己想的时间还要多= =
一共有两个select选项框,点击选择第一个按钮时,第二个按钮会显示相应的选项,一开始的时候第二个select是没有选项的,这样说可能不太清楚,我们来举一个例子
北京市包括三个区:'海淀区','东城区','西城区',
上海市安包括三个区:'徐汇区','张江区','闵行区',
当地一个选项点击北京选项时,第二个下拉菜单里就是'海淀区','东城区','西城区'三个区,
当地一个选项点击上海选项时,第二个下拉菜单里就是'徐汇区','张江区','闵行区'三个区,
申明两个select下拉菜单,第一个把城市名写进去,第二个写一个值为“==选择==”的option就行
<select name="city" id="city" onchange="link(this.value)"> //触发时间的时候把选中的值返回过去用来找到相对应的数组
<option value="">==请选择==</option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
<select name="block-bj" id="child">
<option value="" checked>==请选择==</option> //用写好的数组来生成下拉列表
</select>
var s1 = document.getElementById("city");
var s2 = document.getElementById("child"); //获取两个下拉菜单
function link(index){
var num = parseInt(index); //返回过来的参数是string字符串,转化为int字符串
if(s2.length>1){ //首先把之前的下拉列表里的添加的东西删掉,不然点一次就会多三个
for(i=s2.length;i>0;i--){
s2.options.remove(i);
}
}
for(i=0;i<subcat[num].length;i++){
addOptions(num); //循环添加opt
}
}
function addOptions(index){
var opt = document.createElement("option");// 生成option,赋值,然后添加进select
opt.text = subcat[index][i];
opt.value = subcat[index][i];
child.options.add(opt);
}
这只是一个低级的写法,是写死的,我再看看有没有好一点的写法。暂时没有想出来,求师兄给个思路
评论