省级联动（JQuery+js+H5Ui库）

目录

H5Ui库的使用方法：

1. 页面中引入CSS文件

2.组件的使用

第一步：先创建js文件并将省份，市级的数据用数组包对象的方法保存起来

第二步：使用H5UI库创建下拉表格

---

H5Ui库的使用方法：

1. 页面中引入CSS文件

• h5ui.min.css

• jquery.min.js

• h5ui.min.js

2.组件的使用

        参照H5UI库官方文档：Select 选择框 (h5ui.io)

---

第一步：先创建js文件并将省份，市级的数据用数组包对象的方法保存起来

var Province = [
    {
        provinceId:101,
        proName:'北京市'
    },
    {
        provinceId:102,
        proName:'上海市'
    },
    {
        provinceId:103,
        proName:'天津市'
    },
    {
        provinceId:104,
        proName:'重庆市'
    },
    {
        provinceId:105,
        proName:'陕西省'
    }
]

区级、市级

var City = [
    {
        provinceId:101,
        cityId:10101,
        cityName:'海淀区'
    },
    {
        provinceId:101,
        cityId:10102,
        cityName:'朝阳区'
    },
    {
        provinceId:101,
        cityId:10103,
        cityName:'昌平区'
    },
    {
        provinceId:101,
        cityId:10104,
        cityName:'东城区'
    },
    {
        provinceId:101,
        cityId:10105,
        cityName:'西城区'
    },
    {
        provinceId:101,
        cityId:10106,
        cityName:'丰台区'
    },
    {
        provinceId:102,
        cityId:10201,
        cityName:'黄埔区'
    },
    {
        provinceId:102,
        cityId:10202,
        cityName:'徐汇区'
    },
    {
        provinceId:102,
        cityId:10203,
        cityName:'普陀区'
    },
    {
        provinceId:102,
        cityId:10204,
        cityName:'虹口区'
    },
    {
        provinceId:102,
        cityId:10205,
        cityName:'宝山区'
    },
    {
        provinceId:102,
        cityId:10206,
        cityName:'闵行区'
    },
    {
        provinceId:103,
        cityId:10301,
        cityName:'河东区'
    },
    {
        provinceId:103,
        cityId:10302,
        cityName:'河西区'
    },
    {
        provinceId:103,
        cityId:10303,
        cityName:'北辰区'
    },
    {
        provinceId:103,
        cityId:10304,
        cityName:'武清区'
    },
    {
        provinceId:105,
        cityId:10501,
        cityName:'西安市'
    },
    {
        provinceId:105,
        cityId:10502,
        cityName:'铜川市'
    },
    {
        provinceId:105,
        cityId:10503,
        cityName:'宝鸡市'
    },
    {
        provinceId:105,
        cityId:10504,
        cityName:'咸阳市'
    },
    {
        provinceId:105,
        cityId:10505,
        cityName:'渭南市'
    },
    {
        provinceId:105,
        cityId:10506,
        cityName:'商洛市'
    }
]

var District = [
    {
        cityId: 10501,
        districtId : 1050101,
        districtName: '雁塔区'
    },
    {
        cityId: 10501,
        districtId : 1050102,
        districtName: '碑林区'
    },
    {
        cityId: 10501,
        districtId : 1050103,
        districtName: '新城区'
    },
    {
        cityId: 10501,
        districtId : 1050104,
        districtName: '未央区'
    },
    {
        cityId: 10501,
        districtId : 1050105,
        districtName: '灞桥区'
    },
    {
        cityId: 10501,
        districtId : 1050106,
        districtName: '莲湖区'
    },
    {
        cityId: 10503,
        districtId : 1050301,
        districtName: '渭滨区'
    },
    {
        cityId: 10503,
        districtId : 1050302,
        districtName: '金台区'
    },
    {
        cityId: 10503,
        districtId : 1050303,
        districtName: '陈仓区'
    },
    {
        cityId: 10503,
        districtId : 1050304,
        districtName: '凤翔区'
    },
    {
        cityId: 10503,
        districtId : 1050305,
        districtName: '岐山县'
    },
    {
        cityId: 10503,
        districtId : 1050306,
        districtName: '扶风县'
    },
    {
        cityId: 10504,
        districtId : 1050401,
        districtName: '秦都区'
    },
    {
        cityId: 10504,
        districtId : 1050402,
        districtName: '渭城区'
    },
    {
        cityId: 10504,
        districtId : 1050403,
        districtName: '武功县'
    },
    {
        cityId: 10504,
        districtId : 1050404,
        districtName: '三原县'
    },
    {
        cityId: 10504,
        districtId : 1050405,
        districtName: '旬邑县'
    }
]

第二步：使用H5UI库创建下拉表格

html代码

<!-- 省份 -->
    <div class="h5ui-form">
        <label for="province" class="h5ui-form-label"> //这里的for后面的province必须和select中的id相同

            选择省份</label>
        <div class="h5ui-select">
            <select name="province" id="province">
                <option value="#">请选择</option>
            </select>
        </div>
    </div>
    <!-- 城市 -->
    <div class="h5ui-form">
        <label for="city" class="h5ui-form-label">
            选择城市</label>
        <div class="h5ui-select">
            <select name="city" id="city">
                <option value="#">请选择</option>
            </select>
        </div>
        
    </div>
    <!-- 区县 -->
    <div class="h5ui-form">
        <label for="district" class="h5ui-form-label">
            选择区、县</label>
        <div class="h5ui-select">
            <select name="district" id="district">
                <option value="#">请选择</option>
            </select>
        </div>

    </div>

JS代码

$(function(){

    $.each(Province,functiong(index,item){
    
        $('#province').append(`<option value = ${item.province}>${item.proName}</option>`)

})


//给省份注册change事件：当省份发生改变时，将对应的城市放到省份的下拉列表框

$('#province').change(function(){

     let pro_id = $(this).val()  //这里的this指的是select表单

     $.each(City,function(index,item){

        if(pro_id == item.provinceId){

               $('#city').append(`<option value="${item.cityId}">${item.cityName}</option`)
          }
      })
  
})

  //给城市注册change事件，当城市发生改变时，将对映的县区放到城市的下拉列表框

     $('#city').change(function () {

                let city_id = $(this).val()

                $('#district option:gt[0]').remove()

                $.each(District, function (index, item) {

                    $('#district').append(`<option 
                      value="${item.districtId}">${item.districtName}</option>`)
                })
            })
        })