![fcf53c973e44dd6cff4951da4908ab59.png](https://i-blog.csdnimg.cn/blog_migrate/53fc9aaa3553fb2421d40e4b204b87c0.jpeg)
![3919780dad69037a20eedbddcac50ae8.png](https://i-blog.csdnimg.cn/blog_migrate/a499f1df9f1c7687855cc20df141db45.jpeg)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select name="province"id="province">
<option >请选择</option>
</select>
<select name="city" id="city">
<option >请选择</option>
</select>
</body>
<!--引入jQuery文件-->
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var arr=["城市","水果","运动"];
var att=[["北京","上海",'南京'],["柠檬","芒果","榴莲","樱桃"],["篮球","足球","橄榄球"]];
var province=$("#province");
for(var i=0;i<arr.length;i++){
province.append("<option>"+arr[i]+"</option>");
}
var city=$("#city");
province.change(function(){//绑定change事件
var index=this.selectedIndex;//获取当前下拉框选中的索引
if(index>0){
var citys=att[index-1];
city.html("<option>"+"请选择"+"</option>");
for(var j=0;j<citys.length;j++){
city.append("<option>"+citys[j]+"</option>")
}
}else{
city.html("<option>"+"请选择"+"</option>");
}
})
</script>
</html>