jquery三級聯動
阿新 • • 發佈：2019-01-17
ble head scale idt html hang app UNC i++
<!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三級聯動