自定义三级联动菜单，默认选择第一个，以及数据格式json转换

最新推荐文章于 2024-07-07 11:05:17 发布

北刘庄我最帅

最新推荐文章于 2024-07-07 11:05:17 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/weixin_34849724/article/details/80678090

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>房间号选择</title>

<style type="text/css">
#room>input{
width:158px;
height:73px;
margin-left:20px;
margin-bottom:30px;
font-size:30px;
color:#666666;
}
#room{
margin-left:0px;
display:inline-block;
text-align:left;
}

#target{
margin-left:0px!important;
}

#flow>input{
font-size:30px;
font-family:'微软雅黑';
width:144px;
height:64px;
color:#ffffff;
margin-left:20px;

outline:none;
border:none!important;
border-radius:10px;
}
#flow{
text-align:center;
margin-top:130px;
}
#bothFlow>p>input{
font-family:"微软雅黑";
font-size:30px;
color:#ffffff;
width:106px;
height:56px;
background-color:#999999;
border:none!important;
}

#bothFlow>p{
margin-top:50px;
}
#bothFlow{
vertical-align:top;
display:inline-block;
margin-right:0px;
margin-bottom:10px;

}
#father{
vertical-align:top;
display:inline-block;
margin-left:80px;

}
#son{
vertical-align:top;
display:inline-block;
}

#roomFather{

vertical-align:top;
display:inline-block;
}
#roomSon{
vertical-align:top;
display:inline-block;
}

#allDom input{
border-radius:10px;
background-color:#ffffff;
border:none;
outline:none;
background:none;
text-align:center;
border:2px solid #666666;

}

.starFlow{
cursor: pointer;
background:#999999;
}
.endFlow{
cursor: pointer;
background:#2A62C9!important;
border: none;
}
.startCode
{
cursor: pointer;
background:#999999;
}

.endCode
{
cursor: pointer;
background:#2A62C9!important;
border: none;
}
.startRoom
{
cursor: pointer;
background:#ffffff;
color:#666666;
}

.endRoom
{
cursor: pointer;
color:#2A62C9!important;
border:2px solid #2A62C9;
}

</style>
<script src='js/jquery1.12.4.min.js'></script>
<script>

function load(){
var num=Object.keys(jsonData)
if(num.length==1){
document.getElementById("targetF").onclick();
}else{
document.getElementById("target").onclick();
document.getElementById("targetT").onclick();
document.getElementById("targetTH").onclick();
}
}

</script>
</head>
<body οnlοad="load()" style='border:1px solid #ffffff;margin:0 auto;padding:0'>

<div id='xuanzeFangjianhao'>

<div id="flow" style='font-size:0;'>

</div>
<div id='allDom' style='width:800px;
height:712px;
margin-top:33px;
text-align: center;
font-size:24px;text-align:left;font-size:0;color:#333333;width:800px;'>

<div id='father' style='width:108px;height:590px;overflow:hidden;'>
<div id='son' style='width:130px;height:590px;overflow-y:auto'>
<div style='width:108px;height:593px;' id='bothFlow'>

</div>
</div>

</div>

<div id='roomFather' style='width:549px;height:590;overflow:hidden;'>
<div id='roomSon' style='width:620px;height:590px;overflow-y:auto'>
<div id='room' style='width:549px;height:591px'>

</div>
</div>
</div>


</div>
<div style=' width:800px;
height:106px;
text-align:center;text-align:center;margin-top:12px;'>
<img id='back' src="images/back.png.png" alt="">
</div>
</div>
<button id='anniu' οnclick='change()'>按钮</button>
<button id='anniu2'>按钮2</button>

</body>
<script>
function change(){
document.getElementById("anniu2").disabled='disabled'
}


var data = [
{"Louceng":"01","Louyu":"A","RoomNumber":"0A01","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"02","Louyu":"A","RoomNumber":"0A11","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"03","Louyu":"A","RoomNumber":"0A12","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"05","Louyu":"A","RoomNumber":"0A13","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"05","Louyu":"A","RoomNumber":"0A14","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"05","Louyu":"A","RoomNumber":"0A15","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"05","Louyu":"A","RoomNumber":"0A16","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"05","Louyu":"A","RoomNumber":"0517","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"05","Louyu":"A","RoomNumber":"0518","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"05","Louyu":"A","RoomNumber":"0519","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"05","Louyu":"A","RoomNumber":"0521","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"05","Louyu":"A","RoomNumber":"0522","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"05","Louyu":"A","RoomNumber":"0523","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"05","Louyu":"A","RoomNumber":"0524","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"05","Louyu":"A","RoomNumber":"0526","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"05","Louyu":"A","RoomNumber":"0527","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"05","Louyu":"A","RoomNumber":"0529","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"05","Louyu":"A","RoomNumber":"0530","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"06","Louyu":"A","RoomNumber":"0602","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"06","Louyu":"A","RoomNumber":"0603","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"06","Louyu":"A","RoomNumber":"0604","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"06","Louyu":"A","RoomNumber":"0605","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"06","Louyu":"A","RoomNumber":"0606","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"06","Louyu":"A","RoomNumber":"0608","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"06","Louyu":"A","RoomNumber":"0609","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"06","Louyu":"A","RoomNumber":"0610","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"06","Louyu":"A","RoomNumber":"0611","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"06","Louyu":"A","RoomNumber":"0612","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"06","Louyu":"A","RoomNumber":"0615","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"06","Louyu":"A","RoomNumber":"0616","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"09","Louyu":"A","RoomNumber":"0905","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"09","Louyu":"A","RoomNumber":"0906","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"09","Louyu":"A","RoomNumber":"0907","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"09","Louyu":"A","RoomNumber":"0908","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"09","Louyu":"A","RoomNumber":"0909","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"09","Louyu":"A","RoomNumber":"0910","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"001","Louyu":"A","RoomNumber":"222","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"002","Louyu":"A","RoomNumber":"333","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"003","Louyu":"A","RoomNumber":"555","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"004","Louyu":"A","RoomNumber":"666","roomPMS":"SDT","roomStatus":"1"},
{"Louceng":"005","Louyu":"A","RoomNumber":"777","roomPMS":"SDT","roomStatus":"1"}

]

function unique(arr){
var res =[];
var json = {};
for(var i=0;i<arr.length;i++){
if(!json[arr[i]]){
res.push(arr[i]);
json[arr[i]] = 1;
}

　　}
return res;
　　 }
var json={}
var louceng=[]//根据座数去重
var louyuAll=[];//获取当前的所有栋数并无去重

for(var i=0;i<data.length;i++){
louyuAll.push( data[i].Louyu);
}

var loucengSure=[];
louyu=unique(louyuAll)
console.log(louyu)
for(var j=0;j<louyu.length;j++){
json[louyu[j]]={}
var arr1=[]
for(var a=0;a<data.length;a++){
if(louyu[j]==data[a].Louyu){
arr1.push(data[a].Louceng)
}
}
arr1=unique(arr1)
var json1={}
for(var i=0;i<arr1.length;i++){
json1[arr1[i]]=[];
for(var y=0;y<data.length;y++){

if(arr1[i]==data[y].Louceng){
json1[arr1[i]].push(data[y].RoomNumber)
}

}
}
json[louyu[j]]=json1

}
console.log(json)
jsonData=json

function mShow(){
var indexsArry=Object.keys(jsonData)
for(var d=0;d<indexsArry.length;d++){
if(indexsArry.length<=1){
document.getElementById("flow").style.display='none'
}
}
mflows=''
mfflows=''
var two=document.getElementById("bothFlow")
var tree=document.getElementById("room")
var indexArry=Object.keys(jsonData)
var erjitext=indexArry[0]
var mnextData=jsonData[erjitext]
var mnnextData=Object.keys(mnextData)
for(var i=0;i<mnnextData.length;i++){
if(i==0){
mflows+=" <p style='margin-top:0px;margin-bottom:31px;'><input id='targetF' type='button' οnclick='nextChoose(this)' class='flow' value="+mnnextData[i]+"></p>"
}else{
mflows+="<p><input class='flow'type='button' οnclick='nextChoose(this)' class='flow' value="+mnnextData[i]+"></p>"
}

}
document.getElementById("bothFlow").innerHTML=mflows
var tto=mnnextData[0]
//默认显示jsonData[btnValue]
var finData=mnextData[tto]
for(var i=0;i<finData.length;i++){
mfflows+=" <input type='button' οnclick='dj(this)' class='flo' value="+finData[i]+">"
}
document.getElementById("room").innerHTML=mfflows
}
mShow()//调用页面时如果一级菜单为一项默认显示后面两级菜单
// 参数：json对象；格式：省{ 市1{县:[县1,县2], },市2{县:县1,县2} }
// 功能：动态数据一级信息展示
function oRoomsChoose(oData){
local=Object.keys(oData)//获取当前对象的属性值（得到一个数组）;未声明，全局变量
var flows=''
for(var i=0; i<local.length;i++){
if(i==0){
flows+=" <input id='target' type='button' οnclick='nextChoose(this)' class='flows' value="+local[i]+">"
}else{
flows+=" <input type='button' class='flow' οnclick='nextChoose(this)' class='flows' value="+local[i]+">"
}

}
document.getElementById("flow").innerHTML=flows

}
//先变色；
$(function () {
//加载事件
var collection = $(".flows");
$.each(collection, function () {
$(this).addClass("startCode");
});
});
//参数：当前点击的对象；功能：选择一级菜单后的二级菜单展示；
function nextChoose(obj){
// var getDisplay = document.getElementById("target").style.display;
// console.log(getDisplay)
//单击事件
console.log(louyu.length)
if(louyu.length>1){

var collection = $(".flows");
$.each(collection, function () {
$(this).removeClass("endCode");
$(this).addClass("startCode");
});
$(obj).removeClass("startCode");
$(obj).addClass("endCode");
}else{
console.log("1")
var collection = $(".flow");
$.each(collection, function () {
$(this).removeClass("endCode");
$(this).addClass("startCode");
});
$(obj).removeClass("startCode");
$(obj).addClass("endCode");
}


var indexArry=Object.keys(jsonData)
if(indexArry.length<=1){
twoshow=''//默认显示字符串
document.getElementById("room").innerHTML=''//清空下级菜单
var indexArry=Object.keys(jsonData)
var btnValue=obj.value;
var nextDatas=jsonData[indexArry]
var nnnextData=nextDatas[btnValue]
console.log(nnnextData)
for(var i=0;i<nnnextData.length;i++){
if(i==0){
twoshow +="<input type='button' οnclick='dj(this)' class='flo' value="+nnnextData[i]+">"
}else{
twoshow +="<input type='button' οnclick='dj(this)' class='flo' value="+nnnextData[i]+">"
}

}
document.getElementById("room").innerHTML=twoshow
}else{
document.getElementById("bothFlow").innerHTML=''//清空下级菜单
document.getElementById("room").innerHTML=''//清空下级菜单
nextflow=''//承接拼接的html
var btnValue=obj.value; //获取当前按钮的值
for(var k=0;k<local.length;k++){//确定是当前的菜单
if(local[k]==btnValue){
nextData=jsonData[btnValue];//flowcodeO写死不允许
var local2=Object.keys(nextData)
for(var j=0;j<local2.length;j++){
if(j==0){
nextflow+="<p style='margin-top:0px;margin-bottom:31px;' ><input id='targetT' type='button' οnclick='final(this)'class='flow' value="+local2[j]+"></p>"
}else{
nextflow+="<p><input type='button' οnclick='final(this)'class='flow' value="+local2[j]+"></p>"
}

}
}
}
document.getElementById("bothFlow").innerHTML=nextflow
}
}
//先变色；
$(function () {
//加载事件
var collection = $(".flow");
$.each(collection, function () {
$(this).addClass("startCode");
});
});
function final(obj){
//单击事件
var collection = $(".flow");
$.each(collection, function () {
$(this).removeClass("endCode");
$(this).addClass("startCode");
});
$(obj).removeClass("startCode");
$(obj).addClass("endCode");
document.getElementById("room").innerHTML=''
var fina=''
var finallyKw=obj.value;
var arrfinal=[];
arrfinal=nextData[finallyKw]
//当前的获取下级菜单的数组；
for(var r=0;r<arrfinal.length;r++){//a座写死不允许
fina+="<input type='button' οnclick='dj(this)' class='flo' value="+arrfinal[r]+">"
}
document.getElementById("room").innerHTML=fina
}
$(function () {
//加载事件
var collection = $(".flo");
$.each(collection, function () {
$(this).addClass("startRoom");
});
});
//单击事件
function dj(dom) {

var collection = $(".flo");
$.each(collection, function () {
$(this).removeClass("endRoom");
$(this).addClass("startRoom");
});
$(dom).removeClass("startRoom");
$(dom).addClass("endRoom");
}
oRoomsChoose(jsonData)

function myClose(){//任务
//取出time中的数,保存在n中
var n=parseInt(time.innerHTML);
n-=1//将n-1
if(n>0){//如果n>0
//将n+秒钟后自动关闭再放回time中
time.innerHTML=n+'<span style="color:#2A62C9;font-family:微软雅黑;">s关闭</span>'
//再启动下一次定时器，将序号再保存在timer中
timer=setTimeout(arguments.callee,1000);
}else{//否则
window.location.href='../index.html'
}
}
var timer=null;//保存定时器序号
function setCloseJump(){
timer=setTimeout(myClose,1000);//启动一次性定时器
}

setCloseJump()
var back=document.getElementById('back')
back.οnclick=function(){
console.log("点击返回")
}


</script>
</html>

北刘庄我最帅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义三级联动菜单，默认选择第一个，以及数据格式json转换

&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="Cache-Control" content="no-transform" /&gt; &lt;
复制链接

扫一扫