需要起源
原生的select有很多款式不能随便改变，比方不能设置居中不失效，select框长度不能依据内容自适应等。而且在ios端和安卓端显示的款式不对立。所以为了解决以上问题，基于swiper对select进行了优化改良，改良后的款式能够随便设置，实现多端款式对立。
html源码
须要在html中引入须要依赖的css和js
<link rel\="stylesheet" type\="text/css" href\="select/css/style.mobile.css" /> <link rel\="stylesheet" type\="text/css" href\="select/css/swiper.min.css" /> <script type\="text/javascript" src\="js/jquery-1.7.2.min.js"\></script\> <script type\="text/javascript" src\="select/js/swiper.min.js"\></script\> <script type\="text/javascript" src\="select/js/hSdrop.js"\></script\>而后创立一个select大容器selectbL，而后在容器外面别离创立选项回显容器select-xi，以及选项内容容器display-none。当然，选项内容容器默认是暗藏的，只有在触发点击选项的时候才会显示进去。
<div class\="selectbL"\> <div class\="select-xi sele-bp"\> <span\>工夫</span\> <img src\="images/selectImg.png" class\="selectImg" /> </div\> <div class\="display-none"\> <div vid\="1"\>2020年10月10日</div\> <div vid\="0"\>2020年10月11日</div\> <div vid\="2"\>2020年10月12日</div\> <div vid\="3"\>2020年10月13日</div\> </div\> </div\>js源码
在你引入所有的js和css后，须要初始化一下办法，这个办法就是结构select选项的函数。
new hSdrop({ els:'.sele-bp' })上面是局部构造函数外面的办法，其中一个是确定的办法，另一个是勾销的办法。至于实现选项后你有什么操作，都能够在这两个办法中实现。
$('.select-moob .cancel,.select-moob-cover').click(function(e){ $('.select-moob').remove();});$('.select-moob .determine').click(function(e){ $(el).children('span').text($('.sw-select .swiper-slide-active').html()); $('.select-moob').remove(); })一个革新好的select就实现了，难看，实用，可造性高。