<script src=”https://www.jb51.net/article/js/jquery.js”></script>
<script>
function produceOption(id,list){
console.log(list)
$(id).empty()
$(list).each((index,item)=>{
$(id).append(“<option value=”+item.areaid+”>”+item.areaname+”</option>”)
})
}
$(()=>{
$.ajax({
url:”AreaServlet”,
method:”post”,
data:{pid:0},
dataType:”json”,
success: function(res) {
produceOption(“#proviance”,res)
$(“#proviance”).prepend(“<option selected=’selected’>请选择省份</option>”)
}
})
$(“#proviance”).change(function(){
var pid=$(this).prop(“value”)
$.ajax({
url:”AreaServlet”,
method:”post”,
data:{pid:pid},
dataType:”json”,
success: function(res) {
produceOption(“#city”,res)
$(“#city”).prepend(“<option selected=’selected’>请选择城市</option>”)
}
})
})
$(“#city”).on(“change”,function(){
var pid=$(this).prop(“value”)
$.ajax({
url:”AreaServlet”,
method:”post”,
data:{pid:pid},
dataType:”json”,
success: function(res) {
produceOption(“#country”,res)
}
})
})
})
</script>
</head>
<body>
<h2>三级联动</h2>
<hr/>
<select name=”pro” id=”proviance”>
<option>选择省份</option>
</select>
<select name=”city” id=”city”>
<option>选择城市</option>
</select>
<select name=”country” id=”country”>
<option>请选择区域</option>
</select>
</body>
</html>
相关文章
