工作中遇到一个需求，产品报告里面包含一些原材料的报告，因此在添加产品报告的时候要选择一些原材料报告进来，这样就有了一个多选选择进来，如果把所有的原材料列出来是不合理的实现 像下图这样，原料名称是多选 而且备选有很多。网上找了一个多选左边选择到右边然后确定就可以的。感觉代码比较多，个人代码洁癖所以就自己用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