原生下拉多选

2020-09-22 本文已影响0人用技术改变世界

<head>

<title>Document</title>

</head>

</select>

<!-- <div class="select-picker-search">

</div> -->

</div>

</div>

</div>

</div>

</div>

</div>

</div>

$(function () {

$('#demo1').mySelect()

$('#demo2').mySelect()

})

</script>

</body>

</html>

body{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #666; margin:0;}

.hidden { display: none !important; }

.selectPickerWrapper *{box-sizing: border-box;}

.selectPickerWrapper{position:relative;margin:50px;display:inline-block;}

.select-picker-search{width:200px;height:32px;line-height:32px;color:#666;border-radius:3px;border:1px solid #ddd;padding:0 10px;font-size:14px;cursor:pointer;}

.select-picker-search-checked{position:relative;width:180px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;padding-right: 5px;}

.select-picker-search-checked:after{

border: 5px solid transparent; content: ' ';

height: 0; position: absolute;

width: 0; top:12.2px; border-top: 8px solid #666; right:0; }

.select-picker-options-wrp{display:none;width:200px;border-radius: 2px;box-shadow: 0 1px 5px rgba(0,0,0,.2);background-color: #fff;position:absolute;top:36px;left:0;z-index:999;}

.select-picker-options-serch input{width:160px;height:32px;line-height:32px;border:1px solid #ddd;border-radius:3px;margin:12px 0 0 10px;padding-left:8px;}

.select-picker-options-serch input:focus{border-color: #66afe9;outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6)}

.select-picker-options-list{width:100%;padding:8px 0;}

.select-picker-options-list-item{width:100%;line-height:36px;cursor: pointer;padding:0 12px;}

.select-picker-options-list-item:hover{background: #ebf1f5;}

.duihao {display:inline-block;width:18px;height:18px;border-radius:3px;transform: translateY(4px);margin-right:6px;}

.duihao-checked { background:#00a0ff; position: relative; }

.duihao-checked:before, .duihao-checked::after {

content:""; height:10px; width:2px;

border-radius: 10px; display:block;

background:white; position: absolute;

top:4px; left:10px;

transform:rotate(45deg);-ms-transform:rotate(45deg);

}

.duihao-checked::before {

height:6px; transform: rotate(-45deg); -ms-transform:rotate(-45deg);

position: absolute; top:7px; left:5px;

}

.duihao-nocheck{border:1px solid #ddd;}

(function($,window,document,undefined){ //用一个自调用匿名函数把插架代码包裹起来，防止代码污染

$.fn.mySelect = function (options) {

var defaults = { //defaults 使我们设置的默认参数。

Event : "click", //触发响应事件

msg : "Holle word!" //显示内容

};

var options = $.extend(defaults, options); //将传入参数和默认参数合并

console.log(options)

var $this = $(this); //当然响应事件对象

// $this.live(options.Event, function (e) { //功能代码部分，绑定事件

// alert(options.msg);

// });

//生成option-item并追加展示

var html = '';

html += '<div class="select-picker-search">';

html += '<div class="select-picker-search-checked">请选择</div>';

html += '</div>';

html += '<div class="select-picker-options-wrp">';

html += '<div class="select-picker-options-serch">';

html += '<input type="text" placeholder="">';

html += '</div>';

html += '<div class="select-picker-options-list">';

$this.find("option").each(function(){

let _this = $(this);

html += '<div class="select-picker-options-list-item">';

html += '<b class="duihao duihao-nocheck"></b>';

html += '<span>'+_this.text()+'</span>';

html += '</div>';

})

html += '</div>';

$this.append(html);

// 下拉显示隐藏

$this.on('click',".select-picker-search", function (e) { //功能代码部分，绑定事件

$(this).next('.select-picker-options-wrp').toggle();

$(this).next('.select-picker-options-wrp').find('.select-picker-options-serch input').focus();

});

// 点击选中或不选

$this.on('click',".select-picker-options-list-item",function(){

let _this = $(this);

if(_this.find('.duihao-nocheck').length > 0){

_this.find('.duihao').removeClass('duihao-nocheck').addClass('duihao-checked');

}else{

_this.find('.duihao').addClass('duihao-nocheck').removeClass('duihao-checked');

}

// 循环遍历options中选中的项添加到选项栏中

var checkedArr = [];

$this.find(".select-picker-options-list-item").each(function(){

let _this = $(this);

if(_this.find('.duihao-checked').length > 0){

checkedArr.push($.trim(_this.text()))

}

})

if (checkedArr.length > 0) {

$this.find('.select-picker-search-checked').text(checkedArr.join(','));

// $this.find('.select-picker-search-checked').text(checkedArr.join(',')).css('color', '#fff');

} else {

$this.find('.select-picker-search-checked').text('请选择').css('color', '#757575');

}

})

// 前端实现下拉搜索

$this.on('keyup',".select-picker-options-serch input",function(){

var text = $(this).val();

var html = '';

$this.find("option").each(function(){

let _this = $(this);

if(_this.text().indexOf(text) != -1){

html += '<div class="select-picker-options-list-item">';

html += '<b class="duihao duihao-nocheck"></b>';

html += '<span>'+_this.text()+'</span>';

html += '</div>';

}

})

if(html == ''){

html += '<p style="text-align:center;">没有相关内容</p>';

}

$this.find(".select-picker-options-list").html('').append(html);

})

}

// 点击document任意地方下拉消失

$(document).click(function (event) {

var _con = $('.select-picker-options-wrp'); // 设置目标区域

var _con2 = $('.select-picker-search-checked'); // 设置目标区域

if (!_con2.is(event.target) && !_con.is(event.target) && _con.has(event.target).length === 0) { // Mark 1

$('.select-picker-options-wrp').hide(); //淡出消失

}

});

})(jQuery,window,document);

原生下拉多选

猜你喜欢

热点阅读