二级联动下拉菜单

 html+js

• html部分：

<select id="select-province">
  <option value="-1">请选择省份</option>
</select>
<select id="select-city">
  <option value="-1">请选择地级市</option>
</select>

•   js部分：

<script src="jquery-1.11.3.js"></script>
<script>
  //页面加载完成后，为select填充option
  $(function () {
    var provinceList = [
      '北京市',
      '上海市',
      '浙江省'
    ];
    var cityList = [
      ['东城区', '西城区', '海淀区'],
      ['闵行区', '浦东区', '金山区'],
      ['杭州市', '宁波市', '绍兴市', '嘉兴市']
    ];
    //将provinceList中每个省份转为option标签，追加到id为select-province的元素下
    //为id为select-province的元素绑定change事件
      //获得当前选中项的下标i
      //去cityList数组中获得i-1位置的子数组
      //清空id为select-city的元素内容
      //先追加一个option“请选择”
      //遍历子数组中每个城市
        //将每个城市转为option追加到id为select-city的元素下
    $('#select-province').append(
        "<option>"+provinceList.join('</option><option>')+"</option>"
    ).change(e=>{
      var i=e.target.selectedIndex;
     if(i==0)
       $('#select-city option:gt(0)').remove();
      else{
       //去cityList数组中获得i-1位置的子数组
       var cts=cityList[i-1];
       $('#select-city').empty().append("<option>请选择地级市</option>").append("<option>"+cts.join("</option><option>")+"</option>")
        }

    });
</script>