jquery實現select三級聯動(簡單易懂)

https://blog.csdn.net/yanchenxi313761/article/details/79731900

 <script>
        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 () {
            for(var i=0;i<aProvince.length;i++){
                $('#selProvince').append('<option>'+aProvince[i]+'</option>');
            };
            $('#selProvince').change(function () {
                $('#selCity').children().not(':eq(0)').remove();
                $('#selCountry').children().not(':eq(0)').remove();
                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>');
                }
            });
            $('#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>
</head>
<body>
<select name="" id="selProvince">
    <option value="">----請選擇----</option>
</select>
<select name="" id="selCity">
    <option value="">----請選擇----</option>
</select>
<select name="" id="selCountry">
    <option value="">----請選擇----</option>
</select>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章