<html lang="en">
? <head>
? ? <meta charset="UTF-8" />
? ? <title>Document</title>
? ? <link rel="stylesheet" href="./select.css" />
? </head>
? <body>
? ? <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 class="select-picker-search">
? ? ? ? <div class="select-picker-search-checked">漕宝路666号</div>
? ? ? </div> -->
? ? ? <div class="select-picker-options-wrp">
? ? ? ? <div class="select-picker-options-serch">
? ? ? ? ? <input type="text" placeholder="" />
? ? ? ? </div>
? ? ? ? <div class="select-picker-options-list">
? ? ? ? ? <div class="select-picker-options-list-item">
? ? ? ? ? ? <b class="duihao duihao-nocheck"></b><span>万源路</span>
? ? ? ? ? </div>
? ? ? ? ? <div class="select-picker-options-list-item">
? ? ? ? ? ? <b class="duihao duihao-checked"></b><span>漕宝路666号</span>
? ? ? ? ? </div>
? ? ? ? ? <div class="select-picker-options-list-item">
? ? ? ? ? ? <b class="duihao duihao-nocheck"></b><span>古美街道</span>
? ? ? ? ? </div>
? ? ? ? ? <div class="select-picker-options-list-item">
? ? ? ? ? ? <b class="duihao duihao-nocheck"></b><span>平南路888号</span>
? ? ? ? ? </div>
? ? ? ? ? <div class="select-picker-options-list-item">
? ? ? ? ? ? <b class="duihao duihao-nocheck"></b><span>合川路</span>
? ? ? ? ? </div>
? ? ? ? ? <div class="select-picker-options-list-item">
? ? ? ? ? ? <b class="duihao duihao-nocheck"></b><span>莲花路4545号</span>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? ? <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
? ? <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
? ? <script src="./select.js"></script>
? ? <script>
? ? ? $(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>';
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>没有相关内容</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);