<!doctype html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<meta name="viewport"
?????????content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
???<meta http-equiv="X-UA-Compatible" content="ie=edge">
???<title>jquery手写三级联动</title>
</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>
</body>
<script src="./jquery/jquery.2.0.0.js"></script>
<script>
???var iNum1;
???var iNum2;
???var aProvince = [‘1‘, ‘2‘, ‘3‘];
???var aCity = [[‘11‘, ‘12‘, ‘13‘], [‘21‘, ‘22‘, ‘23‘], [‘31‘, ‘32‘, ‘33‘]];
???var aCountry = [[[‘111‘, ‘112‘], [‘121‘, ‘122‘], [‘131‘, ‘132‘]], [[‘211‘, ‘212‘], [‘221‘, ‘222‘], [‘231‘, ‘232‘]], [[‘311‘, ‘312‘], [‘321‘, ‘322‘], [‘331‘, ‘332‘]]];
???$(function () {
???????for (var i = 0; i < aProvince.length; i++) {
???????????$(‘#selProvince‘).append(‘<option>‘ + aProvince[i] + ‘</option>‘);
???????}
???????;
???????$(‘#selProvince‘).change(function () {
???????????//清除之前的选择 ?这里不能用find
???????????$(‘#selCity‘).children().not(‘:eq(0)‘).remove();
???????????//选择自己省对应的市
???????????iNum1 = $(this).find(‘option:selected‘).index();
???????????//去掉第一个请选择
???????????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).find(‘option:selected‘).index();
???????????var aaCountry = aCountry[iNum1 - 1][iNum2 - 1];
???????????for (var n = 0; n < aaCountry.length; n++) {
???????????????$(‘#selCountry‘).append(‘<option>‘ + aaCountry[n] + ‘</option>‘)
???????????}
???????});
???})
</script>
</html>
jquery三级联动
原文地址：https://www.cnblogs.com/shenbo666/p/10281194.html