HTML+JS实现左边选择到右边
工作中遇到一个需求，产品报告里面包含一些原材料的报告，因此在添加产品报告的时候要选择一些原材料报告进来，这样就有了一个多选选择进来，如果把所有的原材料列出来是不合理的实现 像下图这样，原料名称是多选 而且备选有很多。网上找了一个多选左边选择到右边然后确定就可以的。感觉代码比较多，个人代码洁癖所以就自己用js+html写了一个。底部有打包链接地址
在此记录 样式如图
然后是代码：
select.html：主要是左中右三栏 左边备选项，中间是几个命令按钮，右边是已经选择的项目。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML+JS实现左边选择到右边</title>
<link rel="stylesheet" href="select.css" type="text/css">
<script src="/public/js/jquery.min.js"></script>
<script src="select.js"></script>
</head>
<body>
<button onclick="getOptions()" style="">添加选择</button>
<ol class="forminfo"></ol>
<div class="selectBg"></div>
<div class="selectBody">
<div class="selectLeft">
<input type="text" id="leftInput" class="dfinput" onchange="searchOptions(this.value)" onkeyup="searchOptions(this.value)" placeholder="这里用ajax动态检索展示下面列表">
<ul>
<li data-id="1">第一项选择</li>
<li data-id="2">第2项选择</li>
<li data-id="3">第3项选择</li>
<li data-id="4">第4项选择</li>
<li data-id="5">第5项选择</li>
<li data-id="6">第6项选择</li>
<li data-id="7">第7项选择</li>
<li data-id="8">第8项选择</li>
<li data-id="9">第9项选择</li>
<li data-id="10">第10项选择</li>
</ul>
</div>
<div class="selectMid">
<ul>
<li><i class="fa fa-angle-right" onclick="addSelected()"> > </i></li>
<li><i class="fa fa-angle-left" onclick="removeSelected()"> < </i></li>
<li><i class="fa fa-angle-double-right" onclick="addAll()"> >> </i></li>
<li><i class="fa fa-angle-double-left" onclick="removeAll()"> << </i></li>
</ul>
</div>
<div class="selectRight">
<div style="text-align: center; font-size: 16px; font-weight: bold;margin-top: 10px;">已选列表</div>
<ul></ul>
<div style="position: absolute; bottom: 10px; right:10px ">
<button class="btn btn-small btn-info" onclick="setOptions()">确定</button>
<button class="btn btn-small btn-danger" onclick="cancelOptions()">取消</button>
</div>
</div>
</div>
<script>
var selectedList = new Array();
var options = [ //这里是已经选择好了的项目
{id:1,name:'第一项选择'}
];
</script>
</body>
</html>select.css 规定样式
.selectBg{width:100%; height:100%; position:fixed; left:0; top:0; background:rgba(0,0,0,0.4);z-index: 100; display:none;}
.selectBody{width:600px;height:400px; border:1px solid #dedede; background:#fff; position:absolute; left:50%; margin-left:-300px; top:50%;margin-top:-200px;z-index: 110;display:none}
.selectBody .selectLeft{width:279px;height:400px; border-right:1px solid #dedede;float:left;}
.selectBody .selectRight{width:279px;height:400px; border-left:1px solid #dedede;float:left;}
.selectBody .selectMid{width:40px;height:400px;float:left;}
.selectLeft ul{margin:10px; height:300px; overflow-y:auto; line-height:180%;}
.selectLeft li{padding:0 10px;cursor: default;}
.selectLeft li.selected{background:#0b6cbc;color:#ffffff;}
.selectRight ul{margin:10px; height:300px; overflow-y:auto; line-height:180%;}
.selectRight li{padding:0 10px;cursor: default;}
.selectRight li.selected{background:#0b6cbc;color:#ffffff;}
.selectMid ul{margin-top:100px; padding: 0px;}
.selectMid li{border:1px solid #CCE0FF;padding:0;list-style:none;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;width: 26px ;height: 26px;text-align: center; font-size: 16px;margin:10px auto;}
.selectMid li i{display:block;line-height: 24px;cursor:pointer;}
.selectBody button{padding:0 5px; height:auto;}
.dfinput{border:1px solid #dedede; width:274px; height:30px; line-height: 30px; text-indent:5px}
ul li{padding:0; list-style:none;}然后是select.js动作 其中ajax部分自己再完善吧 只为了演示效果没有ajax交互了。
// 将默认的选项载入并且显示选择框
function getOptions(){
selectedList = options;
var len=selectedList.length;
$(".selectRight ul").html('');
for(j = 0; j < len; j++) {
var _option = selectedList[j];
html = "<li data-id='"+_option.id+"'>"+_option.name+"</li>";
$(".selectRight ul").append(html);
}
$(".selectBg").fadeIn();
$(".selectBody").fadeIn();
}
// 取消选择
function cancelOptions(){
$(".selectBg").fadeOut();
$(".selectBody").fadeOut();
}
// 手动选择到右侧
function addSelected(){
$(".selectLeft li.selected").each(function(){
var _option = new Object();
_option.id = $(this).data("id");
_option.name = $(this).text();
if(selectedList.find(item=>item.id == _option.id)){
}else{
selectedList.push(_option);
html = "<li data-id='"+_option.id+"'>"+_option.name+"</li>";
$(".selectRight ul").append(html);
$(this).removeClass("selected");
}
});
}
// 全部备选项选择到右侧
function addAll(){
$(".selectLeft li").each(function(){
var _option = new Object();
_option.id = $(this).data("id");
_option.name = $(this).text();
if(selectedList.find(item=>item.id == _option.id)){
}else{
selectedList.push(_option);
html = "<li data-id='"+_option.id+"'>"+_option.name+"</li>";
$(".selectRight ul").append(html);
}
});
}
// 移除已选项
function removeSelected(){
$(".selectRight li.selected").each(function(){
var _option = new Object();
_option.id = $(this).data("id");
_option.name = $(this).text();
thisObj = selectedList.find(item=>item.id == _option.id);
if(thisObj){
var index = selectedList.indexOf(thisObj);
if (index > -1) {
selectedList.splice(index, 1);
}
}
$(this).remove();
});
}
// 移除全部已选
function removeAll(){
$(".selectRight li").each(function(){
var _option = new Object();
_option.id = $(this).data("id");
_option.name = $(this).text();
thisObj = selectedList.find(item=>item.id == _option.id);
if(thisObj){
var index = selectedList.indexOf(thisObj);
if (index > -1) {
selectedList.splice(index, 1);
}
}
$(this).remove();
});
}
// 选择的项目状态切换
$(document).on("click",".selectLeft li",function(){
if($(this).hasClass("selected")){
$(this).removeClass("selected")
}else{
$(this).addClass("selected")
}
});
$(document).on("click",".selectRight li",function(){
if($(this).hasClass("selected")){
$(this).removeClass("selected")
}else{
$(this).addClass("selected")
}
});
//服务端获取备选项
function searchOptions(str=''){
$.ajax({
type:"POST",//POST GET
url:"url",
data:{keyword:str},
dataType: "json",//"xml", "html", "script", "json", "jsonp", "text".
success:function(data){
$(".selectLeft ul").html(data.html);
},
error: function(){}
});
}
// 将已选的项目载入到form表单中 隐藏选择框
function setOptions(){
options = selectedList;
var len=selectedList.length;
var html = '';
for(i = 0; i < len; i++) {
var _option = selectedList[i];
html += "<li><input type='hidden' name='son_id[]' value='" +_option.id + "'>" +
_option.name +
"<i class='fa fa-times'></i></li>";
}
$("ol.forminfo ").html(html);
$(".selectBg").fadeOut();
$(".selectBody").fadeOut();
}这里是我打包带走的链接 select_left_to_right.rar