select多选下拉框

Html

Css

.hide {
	display:none;
}
.check {
	width:260px;
	border:2px solid #000;
	position:absolute;
	top:21px;
	left:0;
	padding:10px;
	background:#fff;
}
.check p {
	display:inline-block;
	margin:10px;
}

$(document).on("click", ".chk", function() {
    var array = [];
    $(".chk:checked").each(function() {
        if (!contains(array, $(this).next().html())) {
            array.push($(this).next().html());
        }
    })
    $('.ipt').val(array.toString())
    console.log(array, 44444)
})
var check = function() {
    var array = [];
    $(".chk:checked").each(function() {
        if (!contains(array, $(this).next().html())) {
            array.push($(this).next().html());
        }
    })
    $('.ipt').val(array.toString())
}
$('.chkAll').click(function() {
    $(".chk:checkbox").prop("checked", true);
    check();
})
$('.clearAll').click(function() {
    $(".chk:checkbox").prop("checked", false);
    check();
})
$('.ipt').click(function() {
    $('.check').toggleClass('hide');
})
document.onmouseup = function(e) {
    var e = e || window.event;
    var target = e.target || e.srcElement;
    var _con = $('.select') //获取你的目标元素
    //1. 点击事件的对象不是目标区域本身
    //2. 事件对象同时也不是目标区域的子元素
    if (!_con.is(e.target) && _con.has(e.target).length === 0) {
        $('.check').addClass('hide');
    }
}
//去重
function contains(arr, obj) {
    var i = arr.length;
    while (i--) {
        if (arr[i] === obj) {
            return true;
        }
    }
    return false;
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

select多选下拉框



代码描述：可以多选的下拉框

更新时间：2019-09-05 15:48:36

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

曦

相关代码

select多选下拉框

最新