效果图:
案例代码:
<!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">
<title>Document</title>
</head>
<body>
省:<select name="selShen" id="selShen">
<option value="sc">四川省</option>
<option value="gd">广东省</option>
<option value="hn">湖南省</option>
<option value="js">江苏省</option>
<option value="yn">云南省</option>
</select> 市:
<select name="selSi" id="selSi">
</select>
<script src="./js/jquery-3.6.0.js"></script>
<script type="text/javascript">
(function($) {
$("#selShen").change(function() {
let shen = $("#selShen").val();
console.log(shen);
if (shen == "sc") {
$("#selSi").html("<option value='cd'>成都市</option>" +
"<option value='nc'>南充市</option>" +
"<option value='my'>绵阳市</option>")
} else if (shen == "gd") {
$("#selSi").html("<option value='cd'>深圳市</option>" +
"<option value='nc'>广州市</option>")
} else if (shen == "hn") {
$("#selSi").html("<option value='cs'>长沙市</option>" +
"<option value='yy'>岳阳市</option>")
} else if (shen == "js") {
$("#selSi").html("<option value='bj'>南京市</option>" +
"<option value='sz'>苏州市</option>")
} else if (shen == "yn") {
$("#selSi").html("<option value='km'>昆明市</option>" +
"<option value='dl'>大理市</option>")
}
})
$("#selShen").change();
})(jQuery);
</script>
</body>
</html>