javascript实现二级联动列表

2022-09-01 08:09:17

javascript实现二级联动列表

<!DOCTYPE HTML><html><head><title>二级联动列表</title><metacharset="utf-8"/><style>.hide{display: none;}</style></head><body><selectname="provs"><!-- selectedIndex=0 --><option>—选择省—</option><!-- selectedIndex=1 --><option>北京市</option><option>天津市</option><option>河北省</option></select><!-- 市 --><selectname="cities"class="hide"></select><script>/*实现“省”和“市”的级联下拉列表*/var cities=[//北京[{"name":'东城区',"value":101},{"name":'西城区',"value":102},{"name":'海淀区',"value":103},{"name":'朝阳区',"value":104}],//天津[{"name":'河东区',"value":201},{"name":'河西区',"value":202},{"name":'南开区',"value":303}],//河北[{"name":'石家庄市',"value":301},{"name":'廊坊市',"value":302},{"name":'保定市',"value":303},{"name":'唐山市',"value":304},{"name":'秦皇岛市',"value":304}]];//获取触发事件的元素 "省份"var provs=document.getElementsByName("provs")[0];//绑定事件处理函数,onchange:当前元素的change事件的事件处理函数,事件改变触发
    provs.onchange=function(){//获取要修改的元素,就是"市"var city=document.getElementsByName("cities")[0];//如果点击选择省,把选择市隐藏if(this.selectedIndex==0){
        city.className="hide";return;}//点击不同省时,把上一个省留在市里的option清空
      city.innerHTML="";//selectedIndex:获取select子元素下标,减1变对应数组下标var i=this.selectedIndex-1;//创建文档片段对象frag,别问这是什么,问就是爱过var frag=document.createDocumentFragment();//在选择市的开头插入-选择市-var option=document.createElement("option");
      option.innerHTML="-选择市-";
      frag.appendChild(option);//遍历省对应的市插入市的select中//cities[i]是下标为数字的数组,建议使用for offor(var ctof cities[i]){var option=document.createElement("option");
        option.innerHTML=ct.name;
        frag.appendChild(option);}
      city.appendChild(frag);//如果事件触发,市显示,不隐藏
      city.className="";}</script></body></html>
  • 作者：bestadc
  • 原文链接：https://blog.csdn.net/bestadc/article/details/116723485
    更新时间：2022-09-01 08:09:17