三级联动三 个一起变
来源：3-8 实现二级联动菜单-2
cccca
2019-11-20 19:17:20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>级联菜单</title>
</head>
<body>
<!--思路：在页面加载完之后对一级目录进行加载，之后在一级目录发生变化的时候对二级目录进行加载 -->
<select id="lv1" style="width:200px;height:30px">
<option selected="selected">请选中</option>
</select>
<select id="lv2" style="width:200px;height:30px">
<option selected="selected">请选中</option>
</select>
<select id="lv3" style="width:200px;height:30px">
<option selected="selected">请选中</option>
</select>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//页面就绪函数： 用于获取有一级频道的数据 ps我们建议每一个页面就虚函数就是一个独立的功能
$(function(){
$.ajax({
//地址
"url" : "/ajax/channel",
//向服务器传递的参数 参数使用json格式传递
"data" : {"level" : "1"},
//请求类型
"type" : "get",
//数据反悔的格式
"dataType" : "json",
//接收响应处理的函数
"success" : function(json){
//console.log(json);//测试
for(var i = 0;i<json.length; i++){
var ch = json[i];
//往一级目录添加数据 ps 别忘记option还有一个value属性
$("#lv1").append("<option value ='" + ch.code + "'>" + ch.name + "</option>");
}
}
});
});
// 页面就绪函数：用于联动二级频道的数据
$(function(){
//绑定页面 使用change事件：表单的输入项内容出现变化的事件
$("#lv1").change(function(){
//获取当前选中的对象中的输入的值 也就是上面我们append添加的vlaue的值
var parent = $(this).val();
//console.log(parent);//前沿/区域链/人工智能
//当我们知道一级频道的code值后，我们就可以发送新的请求
$.ajax({
"url":"/ajax/channel",
"data":{"level":"2","parent" : parent},
"dataType":"json",
"type":"get",
"success":function(json){
//console.log(json);
//加载二级频道
//移除所有lv2下的原始option选项
$("#lv2>option").remove();
for(var i=0;i<json.length;i++){
var ch = json[i];
//往二级频道的下拉框中增加option选项
$("#lv2").append("<option value ='" + ch.code + "'>" + ch.name + "</option>");
}
}
});
});
});
//第三级联动
$(function(){
//为lv2绑定change事件
$("#lv2").change(function(){
//获取当前选中的对象中的输入的值
var parent = $(this).val();
console.log(parent);
//发送新的请求
$.ajax({
"url":"/ajax/channel",
"data":{"level":"3","parent" : parent},
"dataType":"json",
"type":"get",
"success":function(json){
//console.log(json);
//加载二级频道
//移除所有lv3下的原始option选项
$("#lv3>option").remove();
for(var i=0;i<json.length;i++){
var ch = json[i];
//往二级频道的下拉框中增加option选项
$("#lv3").append("<option value ='" + ch.code + "'>" + ch.name + "</option>");
}
}
})
})
});
</script>
</body>
</html>
怎么实现当第一个选项发现变化时，其他两个选项跟着变化相应的选项
1回答
-
同学你好。问题的关键是触发添加三级标签的函数。直接填充二级标签的option并不会触发change事件，只能考虑别的方式。可以使用select()方法。
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
select() 方法触发 select 事件，或规定当发生 select 事件时运行的函数。
所以我们可以给想要选择的元素使用select()方法，使其触发select事件。
具体代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>级联菜单</title> </head> <body> <select id="lv1" style="width:200px;height:30px"> <option selected="selected">请选中</option> </select> <select id="lv2" style="width:200px;height:30px"> <option selected="selected">请选中</option> </select> <select id="lv3" style="width:200px;height:30px"> <option selected="selected">请选中</option> </select> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $.ajax({ "url" : "/ajax/channel", "data" : {"level" : "1"}, "type" : "get", "dataType" : "json", "success" : function(json){ for(var i = 0;i<json.length; i++){ var ch = json[i]; $("#lv1").append("<option value ='" + ch.code + "'>" + ch.name + "</option>"); } } }); }); $(function(){ $("#lv1").change(function(){ var parent = $(this).val(); $.ajax({ "url":"/ajax/channel", "data":{"level":"2","parent" : parent}, "dataType":"json", "type":"get", "success":function(json){ $("#lv2>option").remove(); for(var i=0;i<json.length;i++){ var ch = json[i]; $("#lv2").append("<option value ='" + ch.code + "'>" + ch.name + "</option>"); } //在这里添加select()方法，触发select事件 $("#lv2>option").select(); } }); }); }); $(function(){ //改为绑定select事件 $("#lv2").select(function(){ var parent = $(this).val(); console.log(parent); $.ajax({ "url":"/ajax/channel", "data":{"level":"3","parent" : parent}, "dataType":"json", "type":"get", "success":function(json){ $("#lv3>option").remove(); for(var i=0;i<json.length;i++){ var ch = json[i]; $("#lv3").append("<option value ='" + ch.code + "'>" + ch.name + "</option>"); } } }) }) }); </script> </body> </html>如果解答了同学的疑问，望采纳~
祝学习愉快~
0
相似问题