如何实现三级联动第一个改变最后一个跟着改变或消失
来源：3-8 实现二级联动菜单-2
weixin_慕瓜9083905
2020-01-06 17:05:44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
"url":"/ajax/city_list",
"type":"get",
"data":{"level":"1"},
"dataType":"json",
"success":function(json){
for(var i=0;i<json.length;i++){
var ch=json[i];
console.log(json);
$("#lve1").append("<option value='"+ch.code+"'>" + ch.name+ "</option>")
}
}
})
})
$(function(){
$("#lve1").on("change",function(){
var parent=$(this).val();
console.log(parent);
$.ajax({
"url":"/ajax/city_list",
"type":"get",
"data":{"level":"2","parent":parent},
"dataType":"json",
"success":function(json){
$("#lve2>option").remove();
for(var i=0;i<json.length;i++){
var ch=json[i];
$("#lve2").append("<option value='"+ch.code+"'>"+ch.name+"</option>");
}
}
})
})
})
$(function(){
$("#lve2").on("change",function(){
var block=$(this).val();
var parent=$("#lve1").value;
console.log(parent);
$.ajax({
"url":"/ajax/city_list",
"type":"get",
"data":{"level":"3","parent":parent,"block":block},
"dataType":"json",
"success":function(json){
$("#lve3>option").remove();
for(var i=0;i<json.length;i++){
var ch=json[i];
$("#lve3").append("<option value='"+ch.code+"'>"+ch.name+"</option>")
}
}
})
})
})
//$("#lve1").append("<option value='"+ch.code+"'>" + ch.cityName+ "</option>")
</script>
</head>
<body>
<select id="lve1" style="width:200px;height:30px">
<option selected="selected">请选择</option>
</select>
<select id="lve2" style="width:200px;height:30px"></select>
<select id="lve3" style="width:200px;height:30px"></select>
</body>
</html>
1回答
-
好帮手慕酷酷
2020-01-06
同学你好，因为三级联动与二级联动相似，关于三级联动的代码，同学可以参考一下这个同学的代码进行完善。 http://class.imooc.com/course/qadetail/173410
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0
相似问题