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>