JQuery实现省级联动
效果图：
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> // 定义二维数组: var arr = new Array(4); arr[0] = new Array("哈尔滨", "齐齐哈尔", "大庆", "佳木斯"); arr[1] = new Array("长春市", "吉林市", "四平市", "通化市"); arr[2] = new Array("沈阳市", "锦州市", "大连市", "铁岭市"); arr[3] = new Array("郑州市", "洛阳市", "安阳市", "南阳市"); </script> </head> <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function() { //获取省份对象 派发change事件 $("#pro").change(function() { //清空市的下拉选中的内容 //$("#city").empty(); $("#city").html(""); //获取省份的value值 var $flag = $(this).val(); //通过value值获取对应省份的市的数组 var cityArrObj = arr[$flag]; //遍历市的数组 $(cityArrObj).each(function() { //把遍历后的市 添加到市的下拉选中 //html的方式会覆盖 //$("#city").html("<option>"+this+"</option>"); //文档操作的时候是追加 $("#city").append("<option>" + this + "</option>"); }) }) }); </script> <body> <form action="#" method="get"> <select id="pro"> <option>-请选择-</option> <option value="0">黑龙江</option> <option value="1">吉林</option> <option value="2">辽宁</option> <option value="3">河南</option> </select> <select id="city"> <option>-请选择-</option> </select> </form> </body> </html>
