自定义下拉框（移动端，基于jQuery）

简介

之前临时碰上需求做了个自定义下拉框，为了方便，直接基于jQuery上写的，使用时需先引入jQuery再调用本方法

效果图

窗口模式：

全屏模式

用法

使用方法简单粗暴 最简单的加个自定义属性ybzsselect就可以
使用：为所有目标select标签新增自定义熟悉ybzsselect，在页面渲染完成后执行方法initSelect进行初始化即可
设置了placeholder属性头部标题为placeholder内容，没写则不显示头部
默认全屏样式，增加not-full-screen类名后变成窗口模式
举个栗子：

<select class="select not-full-screen" id="loadMode" ybzsselect placeholder="请选择装载方式">
    <option>非集装箱</option>
    <option>集装箱</option>
    <option>箱式货车</option>
</select>

具体代码(css由js生成)

function initSelect() {
    $('select[ybzsselect]').each(function (i, o) {
        var $this = $(this),
            _id = $this.attr('id'),
            notFull = $this.hasClass('not-full-screen'),
            display = $this.css('display'),
            placeholder = $this.attr('placeholder'),
            _options = $this.find('option');
        var _labelId = _id + '-select-'+i,
            $label = $this.prev('.ybzsselect-ui-label');
        _options.each(function() {
            if(!$(this).attr('value')) $(this).attr('value', this.innerText);
        })
        var _label = '<a id="' + _labelId + '" class="' + ($this.attr('class') || '') + ' ybzsselect-ui-label" value=\'' + $this.val() + '\' style="display:'+(display == 'none' ? 'block' : display)+';opacity:'+$this.css('opacity')+';" href="javascript:void(0);">' + ($this.find('option[value="' + $this.val() + '"]').text() || $label.text() || placeholder || '') + '</ a>';
        $this.attr('hidden', true).data('label-id', _labelId);
        if($label.length) $label.remove();
        $this.before(_label);
        $label = $this.prev('.ybzsselect-ui-label');
        $this.prev().bind('click', function (e) { //点击生成
            _options = $this.find('option'); 
            var boxId = _id + '-ybzsselect';
            if($('#' + boxId)) $('#' + boxId + ', .ybzsselect-ui-mask').remove();
            var box = '<div id="' + boxId + '" class="ybzsselect-ui-box"></div>';
            $(document.body).append(box);
            var $box = $('#' + boxId);
            if(notFull) $box.addClass('ybzsselect-NFScreen').before('<div class="ybzsselect-ui-mask"></div>');
            if(placeholder) $box.append('<h3 class="ybzsselect-ui-title">'+placeholder+'</div>');
            var $box_mask = $('#' + boxId + ', .ybzsselect-ui-mask');
            $box.append('<div id="'+boxId+'-ul'+'" class="ybzsselect-ui-ul"></div>');
            var $ul = $('#'+boxId+'-ul');
            if(_options.length < 1) {
                $ul.append('<div class="ybzsselect-ui-empty">暂无可选项</div>');
                $label.text('暂无可选项');
            }
            var isSelect = true;
            _options.each(function () {
                if(this.innerText == '') return;
                $ul.append('<a data-value=\'' + this.value + '\' class="ybzsselect-ui-li '+((this.value == $this.val() && isSelect) ? 'selected':'')+'" href="javascript:void(0);">' + this.innerText + '</a>');
                if(isSelect && this.value == $this.val()) isSelect = false;
            });
            $box.append('<a href="javascript:void(0);" class="ybzsselect-ui-cancel">返 回</a>');
            $('.ybzsselect-ui-li').bind('click', function () { //绑定点击选中
                $box_mask.remove();
                $this.val($(this).attr('data-value')).change();
            });
            $('#' + boxId + ' .ybzsselect-ui-cancel, .ybzsselect-ui-mask').bind('click', function() { //点击蒙版、返回按钮关闭
                $box_mask.remove();
            });
        });
        $this.on('change', function() {
            var val = $(this).val(),
                txt = $(this).find('option:selected').text();
            $label.attr('value', val).text(txt);
        })
        // 默认选择首项
        if(_options.length && _options[0].value && _options[0].value == $this.val()) {
            // $this.change();
            var val = _options[0].value,
                txt = _options[0].innerText;
            $label.attr('value', val).text(txt);
        }
    });
    (function() { // 导入样式
        if(document.querySelector('#bgbSelectStyle')) document.querySelector('#bgbSelectStyle').remove();
        var styleNode = document.createElement('style'),
            themeColor = '#fb8629', //主题颜色
            headBgColor = '#fff6ee', //头部背景色
            str =   '.ybzsselect-ui-label {\
                        white-space: nowrap;\
                        text-overflow: ellipsis;\
                        overflow: hidden;\
                    }\
                    .ybzsselect-ui-box {\
                        position: fixed;\
                        display: flex;\
                        overflow: hidden;\
                        flex-direction: column;\
                        top: 0;\
                        left: 0;\
                        width: 100%;\
                        height: 100%;\
                        background: #fff;\
                        z-index: 999;\
                        -webkit-box-sizing: border-box;\
                        -moz-box-sizing: border-box;\
                        box-sizing: border-box;\
                    }\
                    .ybzsselect-ui-ul {\
                        overflow-y: auto;\
                        padding: 0 .9em;\
                        flex: 1;\
                    }\
                    .ybzsselect-ui-empty {\
                        line-height: 3em;\
                    }\
                    .ybzsselect-ui-title {\
                        line-height: 2.6em;\
                        font-size: .9em;\
                        text-align: center;\
                        font-weight: normal;\
                        color: '+themeColor+';\
                        background: '+headBgColor+'\
                    }\
                    .ybzsselect-NFScreen.ybzsselect-ui-box {\
                        width: 70%;\
                        height: auto;\
                        max-height: 80%;\
                        left: 50%;\
                        top: 50%;\
                        border-radius: .3em;\
                        transform: translateX(-50%) translateY(-50%);\
                    }\
                    .ybzsselect-ui-mask {\
                        position: fixed;\
                        top: 0;\
                        left: 0;\
                        width: 100%;\
                        height: 100%;\
                        background: rgba(0,0,0,.5);\
                        z-index: 999;\
                        cursor: pointer;\
                    }\
                    .ybzsselect-ui-box .ybzsselect-ui-li {\
                        position: relative;\
                        display: block;\
                        line-height: 1.4;\
                        padding: 0.8em 0;\
                        border-bottom: 1px solid #e9edf5;\
                        font-size: .9em;\
                        color: #333;\
                    }\
                    .ybzsselect-ui-box .ybzsselect-ui-li:before {\
                        position: relative;\
                        content: "";\
                        display: inline-block;\
                        top: .15em;\
                        width: .9em;\
                        height: .9em;\
                        border: 1px solid #ccc;\
                        border-radius: 50%;\
                        vertical-align: top;\
                        margin-right: .3em;\
                    }\
                    .ybzsselect-ui-box .ybzsselect-ui-li.selected:before {\
                        border-color: '+themeColor+';\
                    }\
                    .ybzsselect-ui-box .ybzsselect-ui-li.selected:after {\
                        content: "";\
                        width: .5em;\
                        height: .5em;\
                        background: '+themeColor+';\
                        display: inline-block;\
                        border-radius: 50%;\
                        position: absolute;\
                        left: .25em;\
                        top: 1.22em;\
                    }\
                    .ybzsselect-ui-box .ybzsselect-ui-li.selected {\
                        color: '+themeColor+';\
                    }\
                    .ybzsselect-ui-box .ybzsselect-ui-cancel {\
                        display: block;\
                        width: 100%;\
                        line-height: 2.8em;\
                        font-size: .9em;\
                        background: '+themeColor+';\
                        text-align: center;\
                        color: #fff;\
                    }';
        styleNode.type='text/css';
        styleNode.id = 'bgbSelectStyle';
        if(styleNode.styleSheet){
            styleNode.styleSheet.cssText = str;
        } else {
            styleNode.appendChild(document.createTextNode(str))
        }
        $('head').append(styleNode);
    })();
    console.trace();
}