3级联动---change事件，

最新推荐文章于 2020-01-14 11:08:43 发布

ruiguang21

最新推荐文章于 2020-01-14 11:08:43 发布

阅读量1.8k

点赞数

分类专栏： js ajax

本文链接：https://blog.csdn.net/ruiguang21/article/details/78717062

版权

js 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

ajax

7 篇文章 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>

ruiguang21

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3级联动---change事件，

无标题文档 .container { width: 800px; height: 600px; border: 2px solid #000; }.grade-list { height: 40px; border-bottom: 1
复制链接

扫一扫