【小河今学 | HTML + CSS + JS + JQ】省城区联动案例

08.21 今天作业完成省城区联动案例
即如下图所示案例，选择完毕后点击确定键将选择的省城区渲染到输入框中。

一、布局

这里用到fieldset标签来达到上图效果，注意要先给

<fieldset>
            <legend for="">下拉选择框实现省市区三级联动</legend>
            <form action="">
                <label for="">您选择的是：</label>
                <input type="text" class="txt">
                <br>
                <select name="" id="" class="prov">
                    <option value="">请选择省份</option>
                </select>
                <select name="" id="" class="city">
                    <option value="">请选择城市</option>
                </select>
                <select name="" id="" class="country">
                    <option value="">请选择县区</option>
                </select>
                <input type="button" value="确定" disabled class="btn">
            </form>
        </fieldset>

* {
    margin: 0;
    padding: 0;
}

.container {
    width: 600px;
    margin: 100px auto;
}

fieldset {
    padding: 10px;
}

fieldset legend {
    font-size: 18px;
}

fieldset .txt {
    width: 200px;
}

fieldset select {
    margin: 10px 0;
    height: 25px;
}

fieldset .prov {
    width: 100px;
}

fieldset .city {
    width: 110px;
}

fieldset .country {
    width: 110px;
}

fieldset .btn {
    width: 50px;
}

二、逻辑

首先引入jq，接着我们需要进入一个包含省城区内容的文件，这里我引用的是一个city.js，在网上都可以搜到相关的文件。
具体内容如下图所示。

这里我们先写一个闭包，然后控制台输出一下provice

;(function ($) { 
    console.log(provice)
})(jQuery);

可以得到如下输出结果

所以在这里我们需要拿到每一个的name，接着把获取到的name加入到selected下。

;(function ($) { 
    // 获取到省份
    $.each(provice,function(pidx,pitem) {
        $('.prov').append("<option>" + pitem.name + "</option>");
    })
})(jQuery);

然后我们就可以得到

接着我们需要根据我们选择的省份来确定当前省份的城市。这里用到change()事件，即当我们改变第一个selected（也就是省份时）。
然后改变后，我们需要获取到当前选择的这个省份的下标，从而定位到改下标对应的city。如下图所示。

另外需要注意的是，每当我们改变省份后，我们之后对应的城市和县区都需要清空。同时我们需要在全局上定义一个变量来存储当前的省下标。
具体代码如下：

	var proIndex = null;    // 设置当前省的下标
	
	// 根据省份得到城市
    $('.prov').change(function() {
        // 改变时，清空城市
        $('.city').empty();
        $('.city').append("<option>请选择城市</option>")
        $('.country').empty();
        $('.country').append("<option>请选择县区</option>")

        // $(this).get(0) 等于 $(this)[0]：相当于把一个$(this) 当前jquery对象 转化为DOM 对象，以便于使用dom的一些方法。
        // console.dir($(this)[0].selectedIndex);
        proIndex = $(this)[0].selectedIndex - 1;
        for(var i = 0, cLen = provice[proIndex].city.length; i < cLen; i++){
            // console.log(provice[nowIndex].city[i])
            $('.city').append("<option>" + provice[proIndex].city[i].name + "</option>");
        }
    })

接着是根据所选的城市设置县区，方法同上

	var cityIndex = null;    // 设置当前城市的下标

	// 根据城市得到县区
    $('.city').change(function() {
        // 清空县区
        $('.country').empty();
        $('.country').append("<option>请选择县区</option>")

        cityIndex = $(this)[0].selectedIndex - 1;
        // console.log(provice[proIndex].city[cityIndex].districtAndCounty)
        for(var j = 0, coLen = provice[proIndex].city[cityIndex].districtAndCounty.length; j < coLen; j++){
            $('.country').append("<option>" + provice[proIndex].city[cityIndex].districtAndCounty[j] + "</option>");
        }     
    })

当县区也选完后，我们就可以让按钮可点击

	// 选完县区后，确定按钮可以选定
    $('.country').change(function () {
        $('.btn').attr('disabled',false)
    })

点击后，我们要找到当前选择的省城区的文本内容，拼接传入input

	// 点击按钮后，获取选择框中的内容，传到input内
    $('.btn').click(function() {
        var prov = $('.prov').find('option:selected').text();
        var city = $('.city').find('option:selected').text()
        var country = $('.country').find('option:selected').text()
        
        $('.txt').attr('value',(prov + city + country));
    })