模拟select弹框

• 功能点：

• 1. 点击text显示下拉框，再次点击下拉框下拉框消失
• 1. 点击下拉框将值赋值给text
• 1. 点击下拉框之外区域，下拉框消失

html

    
            
        
        
    
        
     
      --请选择--
     
        
     
            
      
--请选择--
            
      
男
            
      
女
        
     
    
    
        

css:

/** @Author: baby* @Date:   2017-07-06 12:37:56* @Last Modified by:   baby* @Last Modified time: 2017-07-06 14:38:51*/.model-select-box {    position: relative;    width: 200px;    height: 30px;    line-height: 30px;    background-color: #fff;    border: 1px solid #e4e4e4;    border-radius: 3px;    text-indent: 5px;}.model-select-box .model-select-text {    position: relative;    width: 100%;    height: 28px;    // height: 30px;    // line-height: 30px;    color: #666;    text-indent: 10px;    font-size: 14px;    cursor: pointer;    user-select: none;}.model-select-box .model-select-text:after {    position: absolute;    top: 10px;    right: 10px;    content: '';    width: 0;    height: 0;    border-width: 10px 8px 0;    border-style: solid;    border-color: #666 transparent transparent;}.model-select-box .model-select-option {    position: absolute;    top: 30px;    left: -1px;    display: none;    list-style: none;    border: 1px solid #e4e4e4;    border-top: none;    padding: 0;    margin: 0;    width: 100%;    z-index: 99;    background-color: #fff;}.model-select-box .model-select-option li {    height: 28px;    line-height: 28px;    color: #333;    font-size: 14px;    margin: 0;    padding: 0;    // text-indent: 10px;    cursor: pointer;}.model-select-box .model-select-option li:hover {    background-color: #f3f3f3;}.model-select-box .model-select-option li.seleced {    background-color: #f3f3f3;}

js:

/* * @Author: baby * @Date:   2017-07-06 12:38:11 * @Last Modified by:   baby * @Last Modified time: 2017-07-06 14:24:53 * 模拟select弹框 * 功能点： * 1. 点击text显示下拉框，再次点击下拉框下拉框消失 * 2. 点击下拉框将值赋值给text * 3. 点击下拉框之外区域，下拉框消失 * */'use strict';$(function() {    selectModel();});/** * 模拟网页中所有下拉列表select * @return {[type]} [description] */function selectModel() {    var $box = $('div.model-select-box');    var $option = $('ul.model-select-option', $box);    var $txt = $('div.model-select-text', $box);    var speed = 10;    /**     * 单击某个下拉列表时，显示当前下拉列表的下拉列表框     * 并隐藏页面中其他下拉列表     */    $txt.on('click', function() {        var $self = $(this);        $option.not($self).siblings('ul.model-select-option').slideUp(speed, function() {            init($self);        });        $self.siblings('ul.model-select-option').slideToggle(speed, function() {            init($self);        });        return false;    });    // 点击选择，关闭其他下拉    /**     * 为每个下拉列表框中的选项设置默认选中标识 data-selected     * 点击下拉列表框中的选项时，将选项的 data-option 属性的属性值赋给下拉列表的 data-value 属性，并改变默认选中标识 data-selected     * 为选项添加 mouseover 事件     */    $option.find('li').each(function(index, element) {        var $self = $(this);        if ($self.hasClass('selected')) {            $self.addClass('data-selected');        }    }).mousedown(function() {        $(this).parent().siblings('div.model-select-text').text($(this).text()).attr('data-value', $(this).attr('data-option'));        $option.slideUp(speed, function() {            init($(this));        });        $(this).addClass('selected data-selected').siblings('li').removeClass('selected data-selected');        return false;    }).mouseover(function() {        $(this).addClass('selected').siblings('li').removeClass('selected');    });    // 点击文档隐藏所有下拉    $(document).on('click', function() {        var $self = $(this);        $option.slideUp(speed, function() {            init($self);        })    });    /**     * 初始化默认选择     */    function init(obj) {        obj.find('li.data-selected').addClass('selected').siblings('li').removeClass('selected');    }}