select的二级联动

最新推荐文章于 2022-04-16 10:54:44 发布

紫蓝青绿黄橙红

最新推荐文章于 2022-04-16 10:54:44 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_37287018/article/details/110633621

版权

本文介绍如何使用HTML和JavaScript实现二级联动效果，通过选择一级菜单动态加载并展示二级菜单的内容，为用户交互提供便利。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML内容

 <select id="select">
    <option value="0">根据类别查询</option>
 </select>
 <select id="select2">
    <option value="0"></option>
 </select>

js内容

var options;
var options2;
$(function (){

	 //获取select中第一个option的值
	  var $sel = $("#select");
	  options=$("#select option:first").val();
	  var $sel2 = $("#select2");
	  options2=$("#select2 option:first").val();
	
	//遍历0级类别下的1级类别  页面加载时进行展示
	            $.ajax({
	                type : "post",
	                method:"post",
	                async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
	                url : "${path}/category/queryTwoCategory", //请求发送到Page处
	                data : {category_id:category_id},
	                dataType : "json", //返回数据形式为json
	                success:function(data) {
	                    console.log(data);
	                    $.each(data,function (index,cat){
	
	                        var $op="<option value=\""+cat.id+"\">"+cat.description+"</option>";
	                        $sel.append($op);
	                    })
	                }
	            });
	
	  $sel.change(function (){
	     options = $("#select option:selected").val();
	      // alert(options);
	     $("#select2").empty();
	     if (options==0){
	         options2=0;
	          yy(1);
	     }else {
	          $.ajax({
	              type : "post",
	              method:"post",
	              async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
	              url : "${path}/category/queryTwoCategory2", //请求发送到Page处
	              data : {category_id:options},
	              dataType : "json", //返回数据形式为json
	              success:function(data) {
	                 console.log("------")
	                 console.log(data);
	                 var $top=" <option value=\"0\">全部</option>";
	                 $sel2.append($top);
	                 $.each(data,function (index,cat){
	
	                    var $op="<option value=\""+cat.id+"\">"+cat.description+"</option>";
	                        $sel2.append($op);
	                 })
	             }
	         });
	        yy(1);
	      }
	
	})
	
	 $sel2.change(function (){
	     options2=$("#select2 option:selected").val();
	      // alert("options2的值是："+options2)
	      yy(1);
	  })
})