WEB - 前端 - 表单Select的三级联动

使用jQuery实现select下拉列表的三级联动

　　<div>
        <select name="" id="selProvince">
            <option value="">----请选择----</option>
        </select>
        <select name="" id="selCity">
            <option value="">----请选择----</option>
        </select> 
        <select name="" id="selCountry">
            <option value="">----请选择----</option>
        </select>
    </div>

<!-- jQuery 3 -->
<script src="jquery/jquery.min.js"></script>

<script type="text/javascript">

var iNum1;//记录省级选项的下标
var iNum2;//记录市级选项的下标

var aProvince = [‘湖北‘,‘江苏‘,‘安徽‘];
var aCity =[
    [‘武汉‘,‘黄冈‘,‘荆门‘],
    [‘南京‘,‘无锡‘,‘镇江‘],
    [‘合肥‘,‘安庆‘,‘黄山‘]];
var aCountry =[
    [[‘武汉1‘,‘武汉2‘],[‘黄冈1‘,‘黄冈2‘],[‘荆门1‘,‘荆门2‘]],
    [[‘南京1‘,‘南京2‘],[‘无锡1‘,‘无锡2‘],[‘镇江1‘,‘镇江2‘]],
    [[‘合肥1‘,‘合肥2‘],[‘安庆1‘,‘安庆2‘],[‘黄山1‘,‘黄山2‘]]];


$(function () {
    /* 1 加载省级选项 */
    for(var i=0;i<aProvince.length;i++){
        $(‘#selProvince‘).append(‘<option>‘+aProvince[i]+‘</option>‘);//给"省"加选项
    }
    /* 2 省与市级二级联动 */
    $(‘#selProvince‘).change(function() {
        //清空之前选项内容
        $(‘#selCity‘).children().not(‘:eq(0)‘).remove();
        $(‘#selCountry‘).children().not(‘:eq(0)‘).remove();
        //找省对应的index
        iNum1 = $(this).children(‘option:selected‘).index();
        var aaCity = aCity[iNum1 - 1];
        //加载选项
        for (var j = 0; j < aaCity.length; j++) {
            $(‘#selCity‘).append(‘<option>‘ + aaCity[j] + ‘</option>‘);
        }
    })
    /* 3 市与县的联动 */
    $(‘#selCity‘).change( function() {
        $(‘#selCountry‘).children().not(‘:eq(0)‘).remove();
        iNum2 = $(this).children(‘option:selected‘).index();
        var aaCountry = aCountry[iNum1 - 1][iNum2 - 1];
        for (var k = 0; k < aaCountry.length; k++) {
            $(‘#selCountry‘).append(‘<option>‘ + aaCountry[k] + ‘</option>‘);
        }
    })
})
</script>