<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script type="text/javascript">
$(function(){
var sheng = ["AAA","BBB","CCC","DDD"] //这里使用手动注入数据的方式
var shi = [["aaa1","aaa2","aaa3","aaa4"],["aaa21","aaa22","aaa23","aaa24"],
["aaa31","aaa32","aaa33","aaa34"],["aaa41","aaa42","aaa43","aaa44"]]
$.each(sheng,function(i){
var option = $("<option></option>").val(i+1).text(this)
// var option = $("<option value='"+(i+1)+"'>"+this+""</option>")
//或
$("#idsheng").append(option)
})
$("#idsheng").change(function(){ //使用click也可以
$("#idshi").empty() //每次变化前清空上一次的数据
$("#idshi").append("<option value='0'>==select==</option>") //加上默认选项
var city = shi[$(this).val()-1]
$.each(city, function(i) {
var option = $("<option></option>").val(i+1).text(this)
$("#idshi").append(option)
});
})
})
</script>
</head>
<body>
Sheng:<select id="idsheng">
<option value="0">--select--</option>
</select>
Shi:<select id="idshi">
<option value="0">==select==</option>
</select>
</body>
</html>
前端专题 JQuery select多级联动实现+注释
最新推荐文章于 2021-12-15 14:51:59 发布