二级联动多选器

zoukankan html css js c++ java

二级联动多选器

因为需要在网上没找到适合的插件就自己写了一个。下面代码需要导入一个JQ（我的：jquery-1.10.2.min_65682a2.js）包和一张小图标（我的：close.gif），找替代的放进去就行；

HTML+JQ：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级选择</title>
<style type="text/css">
body{
background-color: #FFF;
}
.content_ms-left{ 78%;}
.content_ms-right{ 22%;background-color:#FFFAFA;}
.left-label{ 300px;display:inline-block;text-align: center;height: 30px;line-height: 30px;font-size: 16px;background-color: #CFCFCF;}
.get-checkbox-content,.get-checkbox-content2,.get-checkbox-content3{
height:470px;300px;overflow-y:scroll;overflow-x:hidden;display: flex;flex-direction: column;border: 1px solid #999999;background: #FCFCFC;font-size: 16px;
}
.get-checkbox-content>span{margin: 10px 0 0 10px;}
.get-checkbox-content>span span{margin-right: 10px;}
.checkbox_list>div{margin: 10px 0 0 10px;}
.get-checkbox-content3>span{margin: 10px 0 0 10px;}
.get-checkbox-content .btn:hover{background: #CFCFCF;cursor: pointer;transition-delay: 0.1s;transform: scale(1.05);}
.bgcolor{background: #CFCFCF;}
.left{float: left;}
.right{float: right;}
.clearfloat:after{content: ""; display: block; clear: both;}
.clearfloat{zoom: 1;}
</style>
</head>
<body>
<div class="content_ms-left left clearfloat">
<div class="left-title"><label class="left-label">选择金属市场</label>
<label class="left-label">选择金属品种</label>
<label class="left-label">已选择金属</label></div>

<div class="get-checkbox-content left">
<span class="btn1 btn">长江市场  10:40<span class="right">></span></span>
<span class="btn2 btn">上海市场  11:30<span class="right">></span></span>
<span class="btn3 btn">华通市场  11:30<span class="right">></span></span>
<span class="btn4 btn">广东南储  11:20<span class="right">></span></span>
<span class="btn5 btn">上海物贸  11:00<span class="right">></span></span>
<span class="btn3 btn">金川公司  12:00<span class="right">></span></span>
<span class="btn4 btn">中铝公司  12:00<span class="right">></span></span>
<span class="btn5 btn">济南市场  10:00<span class="right">></span></span>
<span class="btn4 btn">沈阳市场  10:00<span class="right">></span></span>
<span class="btn5 btn">北京市场  10:00<span class="right">></span></span>
<span class="btn4 btn">天津市场  10:00<span class="right">></span></span>
<span class="btn5 btn">无锡市场  10:00<span class="right">></span></span>
<span class="btn4 btn">西安市场  10:00<span class="right">></span></span>
<span class="btn5 btn">重庆市场  10:00<span class="right">></span></span>
<span class="btn4 btn">武汉市场  10:00<span class="right">></span></span>
<span class="btn5 btn">昆明市场  10:00<span class="right">></span></span>
</div>

<div class="get-checkbox-content2 left">

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>铜升贴水</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>AOO铝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>铝升贴水</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铅</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>0#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#镍</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锡</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>3MM无氧铜丝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>漆包线</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>磷铜合金</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>铝合金</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>锌合金</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>硫酸镍</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>氯化镍</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>升水铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>平水铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>AOO铝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铅</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>0#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#镍</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锡</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>3MM无氧铜丝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>漆包线</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>磷铜合金</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>铝合金</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>锌合金</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>硫酸镍</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>氯化镍</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>AOO铝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铅</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>0#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#镍</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锡</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>AOO铝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铅</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>0#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#镍</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锡</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>平水铜</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>平水铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>AOO铝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铅</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>0#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#镍</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锡</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>9996电解镍板</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>9996电解镍块</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>标准阴极铜</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>铝锭（华东）</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>铝锭（华南）</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>铝锭（西南）</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>氧化铝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>氢氧化铝</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>AOO铝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铅</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>0#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#镍</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锡</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>AOO铝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铅</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>0#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#镍</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锡</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>AOO铝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铅</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>0#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#镍</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锡</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>AOO铝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铅</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>0#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#镍</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锡</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>AOO铝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铅</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>0#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#镍</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锡</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>AOO铝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铅</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>0#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#镍</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锡</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>AOO铝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铅</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>0#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#镍</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锡</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>AOO铝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铅</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>0#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#镍</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锡</label></div>
</form>

<form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铜</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>AOO铝</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#铅</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>0#锌</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#镍</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锡</label></div>
<div><input type="checkbox" class="content_checkbox" onClick="text()"><label>1#锌</label></div>
</form>
</div>

<div class="get-checkbox-content3 left get-checkbox">
</div>
</div>

<script type="text/javascript" src="jquery-1.10.2.min_65682a2.js"></script>
<script type="text/javascript">
$(".btn").click(function() {
$(".btn").removeClass("bgcolor");
$(this).addClass("bgcolor");
$(".checkbox_list").hide();
$(".checkbox_list").eq($(this).index()).show();
})
$(".content_checkbox").click(function() {
var index=$(this).parent().parent().index();
if($(".get-checkbox").children("span").length >= 5) {
alert("请注意！最多只能选择五种不同的短信");
return false;
}

if($(this).is(':checked') == true) {
var market =$(".btn").eq(index).text().substr(0, $(".btn").eq(index).text().length-1);
$(".get-checkbox").append('<span style="text-align:start;">'+market+'---' + $(this).next().text() + '<img src="close.gif" class="close"/></span>')
} else {
$(".get-checkbox").children("span:last-child").remove()
}

$(".close").click(function() {
$(this).parent("span").remove();
var content1 = $(this).parent("span").text();
var content=content1.split("---");

for(var y = 0; y < $(".btn").length; y++) {
if($(".btn").eq(y).text().substr(0, $(".btn").eq(index).text().length-1) == content[0]) {
for(var x = 0; x <$(".checkbox_list").eq(y).find(".content_checkbox").length; x++) {
if($(".checkbox_list").eq(y).find(".content_checkbox").eq(x).next().text() == content[1]) {
$(".checkbox_list").eq(y).find(".content_checkbox").eq(x).attr("checked", false);
}
}
}
}
})
})

function text() {}
</script>
</body>
</html>

查看全文

相关阅读:
移动端适配方案总结
 排序算法
 使用onchange依赖监控文件修改失效
 实现一个可拖拽的div
在vue中实现两个输入框内容的同步及转换
 简易loading动画的制作
 了解MVC
Spring Boot使用模板引擎总结
 在配置好log4j后信息log还是在Console中输出
 运行时报java.sql.SQLException: No suitable driver的几种解决办法

原文地址：https://www.cnblogs.com/wangxiaoer5200/p/8708560.html