自定义双向选择框

// html css 省略
// html 保持拼接字符串 ； data 借口数据  ;userSelectList_one 右侧栏
// userList_one 左侧栏  data-hidden 用于标志右侧

var html = [];
if (data.length > 0) {
    var right_array = [];
    $("#pop_yingji #userSelectList_one li").each(function (index, value) {
        right_array.push($(this).attr("data-guid"));
    });
    if (right_array.length >= 0) {
        $.each(data, function (index, value) {
            if ($.inArray(value.guid, right_array) >= 0) {
                html[index] = '<li title="' + value.userName + '">' +
                    '<span class="name">' + MY_TOOL_FUNCTION.cutStr(value.userName, 15) + '</span>' +
                    '<input type="checkbox" checked class="xy_checkbox3" data-guid="' + value.guid + '" data-account="' + value.account + '">' +
                    '</li>';
            } else {
                html[index] = '<li title="' + value.userName + '">' +
                    '<span class="name">' + MY_TOOL_FUNCTION.cutStr(value.userName, 15) + '</span>' +
                    '<input type="checkbox" class="xy_checkbox3" data-guid="' + value.guid + '" data-account="' + value.account + '">' +
                    '</li>';
            }
        });
    }
    if (html.length > 0) {
        $("#pop_yingji #userList_one").html(html.join(''));
    } else if (html.length == 0) {
        $("#pop_yingji #userList_one").html('<li>无此联系人！</li>');
    }

    //点击选中的人员，右移
    $("#pop_yingji #userList_one li input.xy_checkbox3").on("click", function () {
        var _this = this, html = "", name = "", guid = "", account = "";
        var checkTrueOrFalse = $(_this).is(":checked");
        if (checkTrueOrFalse) {
            //$("body").find("div[data-hidden]").remove();
            $('div[data-hidden="' + $("select#noticeGroup_one option:selected").val() + '"]').html("");
            guid = $(_this).attr("data-guid");
            account = $(_this).attr("data-account");
            name = $(_this).prev().text();
            html = '<li title="' + name + '" class="lf" data-account="' + account + '" data-guid="' + guid + '"><input data-guid="' + guid + '" data-account="' + account + '" type="checkbox" checked  class="xy_checkbox2"><span class="name">' + MY_TOOL_FUNCTION.cutStr(name, 3) + '</span></li>';
            $("#pop_yingji #userSelectList_one").append(html);
            var $ul = $("#userSelectList_one").html();
            //var $div='<div class="hide" data-hidden="'+guid+'">'+$ul+'</div>'
            $('div[data-hidden="' + $("select#noticeGroup_one option:selected").val() + '"]').html($ul);
        } else {
            guid = $(_this).attr("data-guid");
            $("#pop_yingji #userSelectList_one li").each(function (index, value) {
                if (guid == $(this).attr("data-guid")) {
                    $(this).remove();
                }
            });
        }
        $("#pop_yingji #NumofConnect_one").text($("#pop_yingji #userSelectList_one li").length);

    });
} else if (data.length == 0) {
    $("#pop_yingji #userList_one").html('<li>无此联系人！</li>');
}

$("#pop_yingji").on("click", "input.xy_checkbox2", function () {
    var _this = this;
    var checkTrueOrFalse = $(_this).is(":checked");
    if (!checkTrueOrFalse) {
        $(_this).parents("li").remove();
        var NumofConnect = $("#pop_yingji #userSelectList_one li").length;
        $("#pop_yingji #NumofConnect_one").text(NumofConnect);
        $("#pop_yingji #userList_one li input.xy_checkbox3").each(function (index, value) {
            var guid = $(this).attr("data-guid");
            if (guid == $(_this).attr("data-guid")) {
                $(this).prop("checked", false);
            }
        })
    }

});

自定义实现select placeholder 效果

if("请选择要通知的协同组"===$("select#noticeGroup_one option:selected").html()){
  $("select#noticeGroup_one").css("color","#aaa");
}

$("select#noticeGroup_one").on("change", function () {

    var guid = $("select#noticeGroup_one option:selected").val();
      if("请选择要通知的协同组"!==$("select#noticeGroup_one option:selected").html()){
        $("select#noticeGroup_one").css("color","#000");
      }
});

自定义CheckBox

xy_checkbox3{
    position:relative;
    width: 0px;
    height: 0px;
    border:none;
    color:transparent;
}
.xy_checkbox3::before{
    content:'';
    position: absolute;
    top: -6px;
    left: 6px;
    display: inline-block;
    width: 22px;
    height: 22px;
    /* border-radius: 50%; */
    background: url("images/icon/checkbox_off.png") center center no-repeat;
}
.xy_checkbox3:checked::before{
    background: url("images/icon/checkbox_on.png") center center no-repeat;
}