swiper模拟下拉选择

/*JS部分*/

;(function(){function hSdrop(options){var self=this;self=$.extend(self,{els:'',},options);$(self.els).click(function(e){self.init(this);})}
hSdrop.prototype={init:function(el){var kl=''
kl+='<div class="select-moob">'
kl+='<div class="select-moob-cover"></div>'
kl+='<div class="select-moob-container">'
kl+='    <div class="x12 select-moob-title">'
kl+='        <div class="cancel">取消</div>'
kl+='        <div class="determine">确定</div>'
kl+='    </div>'
kl+='    <div class="x12 select-moob-content">'
kl+='        <div class="swiper-container sw-select">'
kl+='            <div class="swiper-wrapper">'
var dob=$(el).next().children();for(var i=0;i<dob.length;i++){kl+='        <div class="swiper-slide" vid="'+$(dob[i]).attr('vid')+'">'+$(dob[i]).html()+'</div>'}
kl+='            </div>'
kl+='        </div>'
kl+='    </div>'
kl+='</div>'
kl+='</div>'
$('body').append(kl);var swipersff=new Swiper('.sw-select',{direction:'vertical',autoHeight:true,slidesPerView:3,centeredSlides:true,observer:true,observeParents:true,observeSlideChildren:true,});$('.sw-select .swiper-wrapper>div').click(function(e){swipersff.slideTo($(this).index(),500,false);});$('.select-moob .cancel,.select-moob-cover').click(function(e){$('.select-moob').remove();});$('.select-moob .determine').click(function(e){$(el).children('input').val($('.sw-select .swiper-slide-active').html());$(el).children('input').attr('value',$('.sw-select .swiper-slide-active').attr('vid'));$('.select-moob').remove();})},}
window.hSdrop=hSdrop;}());

/*css部分*/


.display-none {
    display: none
}
/* .sele-bp input{
    display: none;
} */
.select-moob {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10
}

.select-moob-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1
}

.select-moob-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;
    background-color: #fff;
    z-index: 2;
    animation: aclstop .3s 1 forwards;
    -webkit-animation: aclstop .3s 1 forwards;
    -webkit-overflow-scrolling: touch
}

@-webkit-keyframes aclstop {
    from {
        opacity: 0;
        transform: translateY(100px);
        -moz-transform: translateY(100px);
        -ms-transform: translateY(100px);
        -webkit-transform: translateY(100px)
    }

    to {
        opacity: 1;
        transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0)
    }
}

@keyframes aclstop {
    from {
        opacity: 0;
        transform: translateY(100px);
        -moz-transform: translateY(100px);
        -ms-transform: translateY(100px);
        -webkit-transform: translateY(100px)
    }

    to {
        opacity: 1;
        transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0)
    }
}

.select-moob-title {
    height: 45px;
    background-color: #f5f5f5;
    padding: 0 20px
}

.select-moob-title>div {
    font-size: 15px;
    letter-spacing: 1px;
    color: #212121;
    line-height: 45px;
    cursor: pointer
}

.select-moob-title .cancel {
    float: left;
    color: #666666;
}

.select-moob-title .determine {
    float: right;
    color: #2454FF;
}

.select-moob-content {
    height: 150px;
    overflow: auto
}

.select-moob-content .sw-select {
    height: 144px;
    position: relative
}

.select-moob-content .sw-select:before {
    content: '';
    position: absolute;
    top: 33%;
    left: 0;
    right: 0;
    height: 45px;
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1
}

.select-moob-content .swiper-slide {
    text-align: center;
    line-height: 45px;
    opacity: .5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    cursor: pointer;
}
.select-moob-content .swiper-slide-active {
    opacity: 1;
    font-size: 15px
}
/*html部分

也要引入swiper的js和css*/
<div class="ipt-span sele-bp">
                    <input type="text" name="" id="" value="" placeholder="请输入所属银行（请填写到具体的支行）" readonly="readonly" />
                </div>
                <div class="display-none">
                    <div vid="1">新阶段 稳中求进</div>
                    <div vid="0">新阶段 创新驱动</div>
                    <div vid="2">新常态 稳中求进</div>
                    <div vid="3">新常态 创新驱动</div>
                </div>

<script type="text/javascript">
            new hSdrop({
                els:'.sele-bp'
            })
        </script>