pannel赋值（改）

Html

Css

    .box {
	display:flex;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}
.panel {
	border:1px solid #ddd;
	width:45%;
	text-align:center;
	height:400px;
	overflow-y:auto;
}
.panel_detail {
	border-bottom:1px solid #ddd;
	padding:5% 0;
	cursor:pointer;
	background:transparent;
	transition:background .15s ease-in-out;
}
.panel_detail.clk {
	background:lightblue;
}
.panel_detail:hover {
	background:lightblue;
}
ul,li {
	padding:0;
}
li {
	list-style:none;
}
.hide {
	display:none;
}
.exchangeCn {
	margin:0 3%;
	align-self:center;
}
.exchangeCn li {
	cursor:pointer;
	border:1px solid #ddd;
	width:20px;
	text-align:center;
	padding:5px;
	margin:5px;
}

var list1 = [{
           "id": 1,
           "inner": "a",
           "code": 'ars'
       },
       {
           "id": 2,
           "inner": "b",
           "code": "back"
       },
       {
           "id": 3,
           "inner": "c",
           "code": "caption"
       },
       {
           "id": 3,
           "inner": "d",
           "code": "drive"
       },
       {
           "id": 3,
           "inner": "e",
           "code": "egg"
       },
       {
           "id": 3,
           "inner": "f",
           "code": "fly"
       },
       {
           "id": 3,
           "inner": "g",
           "code": "garden"
       },
       {
           "id": 3,
           "inner": "h",
           "code": "height"
       },
       {
           "id": 3,
           "inner": "i",
           "code": "ice"
       }
   ]

var list2 = [{
           "id": 2,
           "inner": "b"
       },
       {
           "id": 5,
           "inner": "e"
       },
       {
           "id": 8,
           "inner": "h"
       },
       {
           "id": 9,
           "inner": "i"
       }
   ]

var strObj = 'b,e,h,i'; //默认已有的选项

//初始值
   function loadData() {
       var arr = [];
       var panel = document.getElementsByClassName('panel')[0];
       for (var i = 0, str = ''; i < list1.length; i++) {
           arr.push(list1[i].inner);
           str += '<div class="panel_detail">' + list1[i].code + '(' + list1[i].inner + ')</div>';
       }
       panel.innerHTML = str;
       var name = document.querySelector('.hide_val>input').getAttribute('data-name');
       var inp = document.querySelector('.range_change[name="' + name + '"]');
       splitData(arr, inp);
   }

//已有值
   function splitData(arr, inp) {
       var list = strObj.split(',');
       var main = document.getElementsByClassName('panel_all')[0];
       var panel = document.getElementsByClassName('panel_add')[0];
       var reg = /\((\w+)\)/;
       for (var i = 0; i < arr.length; i++) {
           var elem = main.children[i];
           var inner = elem.innerHTML;
           inner = inner.match(reg)[1];
           for (var y = 0, str = ''; y < list.length; y++) {
               str += '<div class="panel_detail">' + list[y] + '</div>';
               if (list[y] == inner) {
                   elem.className += ' hide';
               }
           }
       }
       panel.innerHTML = str;
       setVal(inp);
   }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

pannel赋值（改）

代码描述：双例表切换并赋值

点击加载数据
请求全部数据到左侧栏
同时将class名为 'range_change'的里的值拿来进行比对,筛选掉相同的数据(括号里的值为value)
右边栏里的数据为最终要提交的数据,同时会把值赋到range_change上

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

.

相关代码

pannel赋值（改）

最新