<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <title>Document</title> </head> <style> </style> <body> <select id="province" name="province"> <option value="select">请选择...</option> <option value="hebei">河北省</option> <option value="liaoning">辽宁省</option> <option value="shandong">山东省</option> </select> <select name="city"> <option value="select">请选择...</option> </select> <script type="text/javascript"> $(function(){ var liaoning_city = ["沈阳", "大连", "鞍山", "锦州", "丹东"]; var hebei_city = ["石家庄", "唐山", "秦皇岛", "衡水", "保定"]; var shandong_city = ["济南", "青岛","烟台市","淄博"]; $("select[name='province']").change(function() { //被选中的option var selected_value = $(this).val(); if(selected_value == "select"){ $("select[name='city']").empty(); var option = $("<option>").val('请选择...').text('请选择...'); $("select[name='city']").append(option); }else if(selected_value == "liaoning"){ //安徽 $("select[name='city']").empty(); //循环添加 for(var i = 0; i < liaoning_city.length; i++) { var option = $("<option>").val(liaoning_city[i]).text(liaoning_city[i]); $("select[name='city']").append(option); } }else if(selected_value == "hebei"){ //河北 $("select[name='city']").empty(); //循环添加 for(var i = 0; i < hebei_city.length; i++) { var option = $("<option>").val(hebei_city[i]).text(hebei_city[i]); $("select[name='city']").append(option); } }else if(selected_value == "shandong"){ //山东 $("select[name='city']").empty(); //循环添加 for(var i = 0; i < shandong_city.length; i++) { var option = $("<option>").val(shandong_city[i]).text(shandong_city[i]); $("select[name='city']").append(option); } } }); }); </script> </body> </html>