3级联动---change事件，

╰+攻爆jí腚メ 2022-06-04 05:07 194阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title><script type="text/javascript" src="jquery-3.0.0.min.js"></script>  
</head>  
<style>  
  .container \{  
            width: 800px;  
            height: 600px;  
            border: 2px solid \#000;  
        \}  
.grade-list \{  
            height: 40px;  
            border-bottom: 1px solid \#999;  
            margin-bottom: 20px;  
            margin-top: 20px;  
        \}  
.grade-list  span\{  
display:block;  
width:20px;  
height:20px;  
border: 1px solid \#000;  
/\*浮动一次\*/  
float: left;  
\}  
.label\_btn \{  
/\*浮动2次\*/  
            float: left;  
            margin-right: 10px;  
        \}  
.butActive \{  
            background: violet;  
        \}  
          .second\_box \{  
            position: relative;  
        \}  
/\*按钮\*/  
.indexBtn\{  
border:none;  
outline:none;  
width:100px;  
height:30px;  
background:darkcyan;  
color:\#fff;  
cursor:pointer;  
float:right;  
margin-right:20px;  
\}  
.indexBtn:hover \{  
            background: \#067171;  
        \}  
/\*ajax读出的数据\*/  
.idd \{  
            display: block;  
            width: 20px;  
            height: 20px;  
            float: left;  
            border: 1px solid \#000;  
            margin-right: 3px;  
        \}  
  
.label\_biao \{  
            float: left;  
            margin-right: 16px;  
            margin-bottom: 10px;  
        \}  
/\*选择的事件\*/  
.butActivebiao \{  
            background: violet;  
        \}  
  
.btnWrap:hover .indexCont \{  
            display: block;  
        \}  
  
/\*设置父级的盒子\*/  
 .indexCont \{  
            width: 350px;  
            height: 260px;  
            background: \#fafafa;  
            position: absolute;  
            right: 20px;  
            top: 30px;  
            border: 1px solid \#ccc;  
            display: none;  
        \}  
/\*设置子级的盒子\*/  
          .indexConWrap \{  
            width: 330px;  
            height: 240px;  
            background: \#fff;  
            box-sizing: border-box;  
            margin: 10px;  
            overflow-y: auto;  
        \}  
/\*3级联动\*/  
\#header  
\{  
border:1px solid red;  
height:100px;  
width: 800px;  
  
\}  
\#headerone\{  
border:1px solid red;  
height:100px;  
width: 200px;  
 float:left;  
\}  
\#headertwo\{  
border:1px solid red;  
height:100px;  
width: 200px;  
float:left;  
\}  
\#headerthree\{  
border:1px solid red;  
height:100px;  
width: 200px;  
float:left;  
\}  
\#headerfrous\{  
border:1px solid red;  
height:100px;  
width: 150px;  
float:left;  
\}  
\#hone\{  
width:80px;  
  
\}  
  
  
</style>  
  
  
<body>  
    
   <div class="container">  
   <div id="header">  
   <div id="headerone">  
  <label>1级菜单:</label>   
  <select id="hone">  
     
   </select>  
     
   </div>  
   <div id="headertwo"></div>  
   <div id="headerthree"></div>  
   <div id="headerfrous"></div>  
     
     
   </div>  
     
     
     
     
     
      
        <div class="grade-list clearfix" id="tel">  
        <div class="label\_btn clearfix"><span id="50023643" class="cc"></span><label>棒球鞋</label></div>  
        <div class="label\_btn clearfix"><span id="50005900" class="cc"></span><label>足球鞋</label></div>  
        <div class="label\_btn clearfix"><span id="50023643" class="cc"></span><label>球鞋</label></div>  
        <div class="label\_btn clearfix"><span id="50005900" class="cc"></span><label>女生上衣</label></div>  
        <div class="label\_btn clearfix"><span id="125612007" class="cc"></span><label>男生上衣</label></div>  
        <div class="label\_btn clearfix"><span id="125612008" class="cc"></span><label>毛巾</label></div>  
        <div class="label\_btn clearfix"><span id="125612009" class="cc"></span><label>鸭翅</label></div>  
         <button class="indexBtn" id="loadBtn">加载</button>  
        </div>  
          
        <div class="second\_box">  
          <label>开始时间:</label> <input type="text" id="begin" placeholder="开始时间" value=""> --  
            <label>结束时间:</label> <input type="text" id="end" placeholder="结束时间" value="">  
            
            <select id="selectOption">  
<option>类目属性</option>  
<option>活跃店铺</option>  
<option>宝贝</option>  
</select>  
               
             <div class="btnWrap">  
              <button class="indexBtn" id="index">指标</button>  
               <div class="indexCont">  
                <div class="indexConWrap" id="indexConWrap"></div>  
                 
               </div>  
               
               
             </div>  
              
              
          
        </div>  
          
          
          
          
          
          
          
          
          
   </div>  
  
  
  
  
  
  
  
  
<script>  
//封装1级菜单  
function one()  
\{  
$.ajax(\{  
url:"http://211.95.60.40:16868/yanshudemo/OneMenus",  
type:'POST',  
dataType:"json",  
success: function(data)\{  
  
// console.log(data.length);  
var str="";  
for(var i=0;i<data.length;i++)  
\{  
// console.log(data\[i\].parentA\_cid);  
str+="<option  id="+data\[i\].parentA\_cid+" >"+data\[i\].ParentA\_Name+"</option>";  
\}  
$("\#hone").html(str);  
\}  
,error:function()\{  
alert("数据开小差了");  
\}  
  
  
\})  
\}  
//调用1级菜单  
one();  
//获取id  
//var aid =$("\#hone option:selected").attr("id");  
  
  
//http://211.95.60.40:16868/yanshudemo/TwoMenus?aid=50008090  
下拉框改变事件  
$("\#hone").change(function()\{  
//获取选中项  
//var selectop=$("\#hone").val();  
//获取选中项的ID  
var aid =$("\#hone option:selected").attr("id");  
console.log("aid===>"+aid);  
\})   
  
  
  
  
  
  
  
  
  
  
  
  
  
//切换选项卡  
$(".label\_btn>span").click(function()\{  
$(this).toggleClass("butActive");  
\});  
  
function index(param)  
\{  
$.ajax(\{  
url:"http://211.95.60.40:16868/yanshudemo/shop",  
type:'POST',  
data:\{  
type: param  
\},  
dataType:"json",  
success:function(data)\{  
console.log(data.columns.length);  
var str = "";  
for(var i=0;i<data.columns.length;i++)  
\{  
// //英文转汉文  
str += "  <div class='label\_biao clearfixbiao'> <span class=\\"idd\\" id=" + data.columns\[i\] + " ></span><label>" + data.columns\[i\] + "</label>   </div>";  
\}  
 $("\#indexConWrap").html(str);  
//切换选项卡  
var label=$(".label\_biao");  
for(var i=0;i<label.length;i++)  
\{  
$(".label\_biao").eq(i).children("span").click(function()\{  
$(this).toggleClass("butActivebiao");  
\})   
\}  
   
\},error:function()\{  
  alert("数据开小差了");  
\}  
\})  
\}  
  
  
//初始化选中项  
        var selectop = $("\#selectOption option:selected").val();  
        index(selectop);  
  
下拉框改变事件  
$("\#selectOption").change(function()\{  
var selectop=$("\#selectOption").val();  
index(selectop);  
\})   
  
  
  
  
  
  
  
  
  
//获取和显示数据接口和数据  
$("\#loadBtn").click(function() \{  
var lab = $(".label\_btn");  
  
  
var charr=\[\];  
for(var i=0;i<lab.length;i++)  
\{  
if(lab.eq(i).children("span").attr("class").indexOf("butActive")>-1)  
\{  
charr.push(lab.eq(i).children("span").attr("id"));  
\}  
\}  
//数组转化成字符串  
var str=charr.join(",");  
 console.log("str>" + str);  
   
 var lable=$(".idd");  
 var charray=\[\];  
 for(var j=0;j<lable.length;j++)  
 \{  
 /\*if(lable.eq(j).children("span").attr("class").indexOf("butActivebiao")>-1)  
 \{  
 charray.push(lable.eq(j).children("span").attr("id"));  
   
 \}\*/  
   
                if (lable.eq(j).attr("class").indexOf("butActivebiao") > -1) \{  
                    charray.push(lable.eq(j).attr("id"));  
                \}  
   
 \}  
var strlable=charray.join(",");  
 console.log("strlable>" + strlable);  
  
  
  
\})  
  
  
  
  
  
  
</script>  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
</body>  
</html>