省市联动效果的简单实现代码(推荐)

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了省市联动效果的简单实现代码(推荐)，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

下拉框二级联动效果在日常应用场景中经常会碰到，尤其是涉及地区、品种等有多级选项时。例如：常见的省市联动下拉框，在选择省份时，城市列表也会更随改变。

思路：

1，所谓联动效果，是指出发父级的数据变化时，会影响到关联性子级数据元素的变化。

下面是造的省市的数据：

2，根据数据动态生成option节点：

3，根据上述省市数据，其中code代表“省级”指向“城市”的标识符，当省级的数据变更时，出发change事件：

Box = []; 
  1.       c.innerHTML = "";  
  2.       /*<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>城市*/  
  3.       for(var j = 0;j < ctLen;j++){
  4.         ct<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.push({
  5.           "text" : ct[j],"value": ct[j]
  6.         });
  7.       }
  8.       addOptions(c,ct<a href="/tag/Box/" target="_blank" class="keywords">Box</a>);
  9.     }</pre>

HTML代码：

下拉框联动效果

省份：