这里写自定义目录标题
最近项目中有要求做一个多选框，如果只是一个简单的一级多选框还好说，可是我这个是二级的，我百度了好久没找到，所幸的是后来这个功能取消了，但为了预防我闲暇之余将这个功能简单做了一下。
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.css"/>
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="css/bootstrap-theme.css"/>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<style type="text/css">
/*浏览器格式化，消除页面预留空间*/
*{
margin: 0;
padding: 0;
}
/*适应各种浏览器屏幕尺寸*/
body{
width: 100%;
height: 100%;
/*设置页面字体大小*/
font-size: 14px;
}
/*给列表设置边框*/
dl{
width: 120px;
/*元素水平居中*/
margin:auto;
/* border: 1px solid #666;*/
/*设置边框圆角*/
/*border-radius: 5px;
background: #fafafa;*/
/* padding: 10px 5px; */
}
dt{
/*下边框*/
/* border-bottom: 1px solid black;*/
/*距离底部内边距*/
/* padding-bottom: 10px;*/
}
/*标示字体加粗*/
</style>
</head>
<body>
<dl class="checkBox" style="width: 800px;">
<div style="float: left;margin-top: 10px;" id ="frist">
<!-- /*选项由选择框(输入框)和标示构成，所以使用<input>标签和<label>标签,label 元素不会呈现任何特殊效果。如果在 label 元素内点击文本，就会触发此控件*/-->
<p><input type="checkbox" name="item" value="1"><span> 选项1</span></p>
<p><input type="checkbox" name="item" value="2"><span> 选项2</span></p>
<p><input type="checkbox" name="item" value="3"><span> 选项3</span></p>
</div>
<div style="margin-left: 180px;" id="second" class="checkbox" οnchange="getSecond()"></div>
</dl>
<br /><br /><br /><br /><br /><br />
<button οnclick="get()">取值</button>
<!-- <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>-->
<!-- <script src="js/jquery-3.2.0.js"></script>-->
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var oInput=document.getElementsByTagName("input"); //获取所有的输入选择框
var type = 0;
var array = []; //获取第一个lable标签，lable标签为input标签定义标记，即"全选"选项。
function get(){ //获取一级checked
// var ids = [];
// $("input[name='item']:checked").each(function(i){
// ids.push($(this).val())
// $("body").append("<p>"+$(this).val()+"</p>")
// })
console.log(array.toString())
}
$("#frist p span").click(function(){ //监听点击标签，动态显示二级选项
var foo = $(this).prev().is(":checked")
type = $(this).prev().val();
createSelectBySpan(foo);//点击文字
});
$("#frist p input").click(function(){ //监听标签复选框选项，选择了则将二级选项都显示并checked
//拿到点击元素的内容<br>
var foo = $(this).is(":checked")
type = $(this).val();
createSelectInput(foo);
});
function createSelectInput(foo){ //点击输入框进来的
var secondDataMap = secondData()
var postLevelArr = [];
if(foo){//当checked是给全选
for (var key in secondDataMap) {
postLevelArr.push(`<p><input type=checkbox name=itemSecond checked=true value=${key}><span>${secondDataMap[key]}</span></p>`);
} //这里点的是一级输入框的checke属性 对应二级全部显示
} else {
//清空对象缓存二级checked信息
for(let i =0;i<array.length;i++){
if( array[i].type == type){
array[i].ids = null
}
}//获取这个type在对象的第几个上
for (var key in secondDataMap) {
postLevelArr.push(`<p><input type=checkbox name=itemSecond value=${key}><span>${secondDataMap[key]}</span></p>`);
}
}
$("#second").html(postLevelArr.join(""));
getSecond()
}
function createSelectBySpan(foo){//点击文字进来的
var secondDataMap = secondData()
//后台控制二级选项之目前给定值
var postLevelArr = []
var mi = -1;
for(let i =0;i<array.length;i++){
if( array[i].type == type){
mi = i
}
}//获取这个type在对象的第几个上
var int = -1
if(mi != -1){
int = array[mi].ids
}
for (var key in secondDataMap) {
if((array.length != 0)&&(mi != -1)&&(int!=null)&&(int.indexOf(key) != -1)){
postLevelArr.push(`<p><input type=checkbox name=itemSecond checked value=${key}><span>${secondDataMap[key]}</span></p>`);
}else{
postLevelArr.push(`<p><input type=checkbox name=itemSecond value=${key}><span>${secondDataMap[key]}</span></p>`);
}
} //这里点的是一级输入框的checke属性 对应二级全部显示
$("#second").html(postLevelArr.join(""))
getSecond()
}
function getSecond(){
var ids = []
var temp
var judge = false
var booe = false
var inputList = $("input[name='item']")
var length = $("input[name='itemSecond']").length
$("input[name='itemSecond']:checked").each(function(i){
ids.push($(this).val())
$("body").append("<p>"+$(this).val()+"</p>")
})
if(ids.length == length ){
booe = true
}
for(let i =0;i<array.length;i++){
if(array[i].type !=null || array[i].type!=undefined){
if( array[i].type == type){
array[i].ids = ids;
judge = true;//这里表示这个二级是被录入过的
}
}
}
if(booe){
//booe为true 即为二级全选了
inputList.each(function(i){
if($(this).val() == type){
$("input[name='item']")[i].checked=true
return true
} // 这里取循环比较是一级的哪一个在二级满选的情况下将一级的checked加上
})
} else {
inputList.each(function(i){
if($(this).val() == type){
inputList[i].checked=false //取消选中
return true
} // 根据type 即value找到一级
})
}
if(judge){ //判断二级数据选项是否已经被选了 有了下面添加数据就不操作了
return
}
temp = {type,ids} //添加数据
array.push(temp)
}
function firstData(){}//获取一级数据，封装
function secondData(){
var select1 = ['橘子','香蕉','苹果','西瓜'];
var select2 = ['聂子建','白小纯','呼噜','周建伟'];
var select3 = ['微信','钉钉','QQ','子弹'];
var secondData;
if (type == 1){
secondData = select1;
}else if(type == 2){
secondData = select2;
}else if(type == 3){
secondData = select3;
}
return secondData
}
</script>
</body>
</html>
代码完毕来看看效果 顺便说一下我是Java页面优化啥的我真的是只猪请原谅我
就这些了，里面一些从后台获取数据只要放到那个数组里面仿照二级那个写法就行了，如若有需要这里放上gitee链接供下载里面有我同学做的另一个我不知道完没完成
https://gitee.com/Pre_Nie/more-select.git
另外说一下 据他说他这个你要在js文件下中的 ly-select.js 中拉到最下面找到
这最后两行他是在这里放的数据。具体我也不清楚。好了目前就这些了希望能帮到你。有用的话赞一个评论一下吧，谢谢
855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
