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>
...................................................