代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>201731061203+许嘉欣</title> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <style> select{ border: 1px solid palevioletred; border-radius: 5px; } select:focus{ outline: none; } </style> </head> <body> <form name="form1" method="post"> 省份：<select name="province" id="province" "changeSelect(this.selectedIndex)"></select> 市区：<select name="city" id="city"></section> </form> <script> var arrpro=["请选择省份","河北省","四川省"]; var arrcit=[["请选择城市"],["石家庄","邯郸","唐山"],["成都","绵阳","德阳"]]; window.init; function init() { var province=document.form1.province; var city=document.form1.city; province.length=arrpro.length; for(var i=0;i<arrpro.length;i++) { province.options[i].text=arrpro[i]; province.options[i].value=arrpro[i]; } var index=0; province.selectedIndex=index; city.length=arrcit[index].length; for(var i=0;i<arrcit[index].length;i++) { city.options[i].text=arrcit[index][i]; city.options[i].value=arrcit[index][i]; } } function changeSelect(index) { var city=document.form1.city; province.selectedIndex=index; city.length=arrcit[index].length; for(var i=0;i<arrcit[index].length;i++) { city.options[i].text=arrcit[index][i]; city.options[i].text=arrcit[index][i]; } } </script> </body> </html> 转载请标明出处:【HTML】使用 JQuery 实现级联选择框
文章来源: https://blog.csdn.net/xjx19991226/article/details/89295665