<!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>
