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

2019-11-20 09:47:18

字体：大中小

来源：转载

供稿：网友

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

思路：

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

下面是造的省市的数据：

var linkDatas = {      provinces:[        {          "code":"0",          "name":"请选择"        },        {          "code":"1",          "name":"北京"        },        {          "code":"2",          "name":"天津"        },        {          "code":"3",          "name":"河北"        },        {          "code":"4",          "name":"湖北"        },        {          "code":"5",          "name":"广东"        },        {          "code":"6",          "name":"其他"        }      ],      citys:{        0:[          "请选择"        ],        1:[          "朝阳区",          "海淀区",          "东城区",          "西城区",          "房山区",          "其他"        ],        2:[          "天津"        ],        3:[          "沧州",          "石家庄",          "秦皇岛",          "其他"        ],        4:[          "武汉市",          "宜昌市",          "襄樊市",          "其他"        ],        5:[          "广州市",          "深圳市",          "汕头市",          "佛山市",          "珠海市",          "其他"        ],        6:[          "其他"        ]      }      };

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

function addOptions(target,options){        var optionEle = null,            target = target,            option = options,            optionLen = options.length;        for(var i = 0;i < optionLen;i++){          optionEle = document.createElement('option');          optionEle.value = option[i].value;          optionEle.text = option[i].text;          target.options.add(optionEle);        }      }

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

pro.onchange = function(){          console.log(this);          var ct = city[this.value],              ctLen = ct.length,              ctBox = [];          c.innerHTML = "";            /*添加城市*/            for(var j = 0;j < ctLen;j++){            ctBox.push({              "text" : ct[j],              "value": ct[j]            });          }          addOptions(c,ctBox);        }

HTML代码：

<div class="content">      <h3>下拉框联动效果</h3>      <p>省份：        <select name="provinces" id="provinces">                  </select>      </p>      <p>        市：        <select name="citys" id="citys">                  </select>      </p>    </div>

全部JavaScript代码：

var linkDatas = {      provinces:[        {          "code":"0",          "name":"请选择"        },        {          "code":"1",          "name":"北京"        },        {          "code":"2",          "name":"天津"        },        {          "code":"3",          "name":"河北"        },        {          "code":"4",          "name":"湖北"        },        {          "code":"5",          "name":"广东"        },        {          "code":"6",          "name":"其他"        }      ],      citys:{        0:[          "请选择"        ],        1:[          "朝阳区",          "海淀区",          "东城区",          "西城区",          "房山区",          "其他"        ],        2:[          "天津"        ],        3:[          "沧州",          "石家庄",          "秦皇岛",          "其他"        ],        4:[          "武汉市",          "宜昌市",          "襄樊市",          "其他"        ],        5:[          "广州市",          "深圳市",          "汕头市",          "佛山市",          "珠海市",          "其他"        ],        6:[          "其他"        ]      }      };      function addOptions(target,options){        var optionEle = null,            target = target,            option = options,            optionLen = options.length;        for(var i = 0;i < optionLen;i++){          optionEle = document.createElement('option');          optionEle.value = option[i].value;          optionEle.text = option[i].text;          target.options.add(optionEle);        }      }      function provincesCitysLink(pro,c){        var LD         = linkDatas,            provinces = LD.provinces,            city       = LD.citys,            initCity  = city[0],            proBox    = [];        /*添加省份*/        for(var i = 0;i < provinces.length;i++){          proBox.push({            "text" : provinces[i].name,            "value": provinces[i].code          })        }            addOptions(pro,proBox);        /*初始化城市*/        addOptions(c,[{          "text" : initCity,          "value": initCity        }]);        /*添加联动事件*/        pro.onchange = function(){          console.log(this);          var ct = city[this.value],              ctLen = ct.length,              ctBox = [];          c.innerHTML = "";            /*添加城市*/            for(var j = 0;j < ctLen;j++){            ctBox.push({              "text" : ct[j],              "value": ct[j]            });          }          addOptions(c,ctBox);        }      }      var provinces = document.getElementById('provinces'),          citys     = document.getElementById('citys');      provincesCitysLink(provinces,citys);

以上这篇省市联动效果的简单实现代码(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：JavaScript 对象字面量讲解

下一篇：js获取新浪天气接口的实现代码