话不多说,直接上代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
<select name="" id="selProvince">
<option value="">--请选择--</option>
</select>
<select name="" id="selCity">
<option value="">--请选择--</option>
</select>
<script>
var iNum1;
var iNum2;
var aProvince = ['湖北', '湖南', '广东'];
var aCity = [
['武汉', '襄阳', '荆州'],
['长沙', '株洲', '湘潭'],
['广州', '深圳', '东莞']
];
$(function () {
for (var i=0;i<aProvince.length;i++) {
$("#selProvince").append('<option>'+ aProvince[i] + '</option>');
};
/*当元素的值发生改变时,会发生 change 事件*/
$("#selProvince").change(function(){
/*':eq'匹配一个给定索引值的元素*/
$('#selCity').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>');
}
});
});