发表于: 2016-10-20 00:27:08

1 1942


最后几次在官网写日报了

今天完成的事情:1.二级联动分享2.图片上传分享3.angular二级联动4.面试题5.在汇智网上重新看了一遍angular

明天计划的事情:按照师兄说的,闭包,原型链,构造器一个个看过去
收获:


如何使用原生js写一个简单的二级联动

首先二级联动的原理其实很简单,只是一个小demo, 可能写这个的时间比我自己想的时间还要多= =
一共有两个select选项框,点击选择第一个按钮时,第二个按钮会显示相应的选项,一开始的时候第二个select是没有选项的,这样说可能不太清楚,我们来举一个例子 
北京市包括三个区:'海淀区','东城区','西城区', 
上海市安包括三个区:'徐汇区','张江区','闵行区', 
当地一个选项点击北京选项时,第二个下拉菜单里就是'海淀区','东城区','西城区'三个区,
当地一个选项点击上海选项时,第二个下拉菜单里就是'徐汇区','张江区','闵行区'三个区,
申明两个select下拉菜单,第一个把城市名写进去,第二个写一个值为“==选择==”的option就行

  1. <select name="city" id="city" onchange="link(this.value)">  //触发时间的时候把选中的值返回过去用来找到相对应的数组
  2.    <option value="">==请选择==</option>
  3.    <option value="0">北京</option>
  4.    <option value="1">上海</option>
  5.    <option value="2">广州</option>
  6.    <option value="3">深圳</option>
  7. </select>
  8. <select name="block-bj" id="child">
  9.    <option value="" checked>==请选择==</option> //用写好的数组来生成下拉列表
  10. </select>
  1. var s1 = document.getElementById("city");
  2. var s2 = document.getElementById("child");    //获取两个下拉菜单
  3. function link(index){
  4.    var num = parseInt(index);       //返回过来的参数是string字符串,转化为int字符串
  5.     if(s2.length>1){           //首先把之前的下拉列表里的添加的东西删掉,不然点一次就会多三个
  6.        for(i=s2.length;i>0;i--){
  7.            s2.options.remove(i);
  8.        }
  9.     }
  10.    for(i=0;i<subcat[num].length;i++){
  11.        addOptions(num);    //循环添加opt
  12.    }
  13. }
  14. function addOptions(index){
  15.    var opt = document.createElement("option");// 生成option,赋值,然后添加进select
  16.    opt.text = subcat[index][i];
  17.    opt.value = subcat[index][i];
  18.    child.options.add(opt);
  19. }

这只是一个低级的写法,是写死的,我再看看有没有好一点的写法。暂时没有想出来,求师兄给个思路




返回列表 返回列表
评论

    分享到