美文网首页
原生下拉多选

原生下拉多选

作者: 用技术改变世界 | 来源:发表于2020-09-22 00:06 被阅读0次

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <link rel="stylesheet" href="./select.css" />

  </head>

  <body style="">

    <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" style="display: none">

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

相关文章

网友评论

      本文标题:原生下拉多选

      本文链接:https://www.haomeiwen.com/subject/wjdiyktx.html