jquery下拉多选select插件

2020/05/19 15:46
阅读数 78

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery下拉多选select插件</title>
    <link rel="stylesheet" href="css/select.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/select.js"></script>
</head>
<body>

    <br><br><br><br>

    <div id="demo1" class="selectPickerWrapper">
        <select class="hidden" multiple="multiple">
            <option>万源路</option>
            <option>漕宝路666号</option>
            <option>古美街道</option>
            <option>平南路888号</option>
            <option>合川路</option>
            <option>莲花路4545号</option>
        </select>
    </div>

    <div id="demo2" class="selectPickerWrapper">
        <select class="hidden" multiple="multiple">
            <option>1111</option>
            <option>222</option>
            <option>333</option>
            <option>444</option>
            <option>555</option>
            <option>666</option>
        </select>
    </div>

    <script>
        $(function () {
            $("#demo1").mySelect();
            $("#demo2").mySelect();
        });
    </script>

</body>
</html>

select.js

(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>';
 		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); 

  
 
 		

select.css

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;}

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部