当前位置: 首页 > Web前端 > HTML5

适配移动端select选项框

时间:2023-04-05 01:34:42 HTML5

需求源原select有很多样式不能随意改变,比如居中不能设置不生效,select框长度不能根据内容适配.而且ios端和Android端显示的样式也不统一。因此,为了解决上述问题,select在swiper的基础上进行了优化改进,改进后的样式可以随意设置,实现多端样式统一。html源码需要在html中引入依赖的css和js然后创建一个大的select容器selectbL,然后在容器中创建一个optionechocontainerselect-xi和一个optioncontentcontainerdisplay-none。当然,选项内容容器默认是隐藏的,只有当点击选项被触发时才会显示。time2020年10月10日2020年10月11日2020年10月12日2020年10月13日js源码导入所有js和css后,需要初始化方法。此方法是构造选择选项的函数。newhSdrop({els:'.sele-bp'})下面是一些构造函数中的方法,其中一个是确认方法,一个是取消方法。至于完成选项后做什么,可以通过这两种方法来完成。$('.select-moob.cancel,.select-moob-cover').click(函数(e){$('.select-moob').remove();});$('.select-moob.determine').click(函数(e){$(el).children('span').text($('.sw-select.swiper-slide-active').html());$('.select-moob').remove();})改造后的select完成,美观,实用,可制造性强。