文章摘要
这篇文章介绍了如何通过JavaScript和PHP动态加载HTML表格中的选项，实现三级联动选择功能。文章详细描述了如何在网页中使用select标签创建多个下拉菜单，并通过JavaScript函数（produceOption）将用户选择的值传递给PHP服务（AreaServlet）。当用户选择一个选项后，JavaScript会向服务器提交请求，服务器返回响应后会将选项动态加载到对应的下拉菜单中。文章的重点在于动态交互和数据处理机制的实现，展示了如何利用 AJAX 和 JavaScript 实现多级选择功能。
<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>