js select下拉框回显对应的文本显示出来_适配性强的移动端select选项框

最新推荐文章于 2025-01-02 13:13:08 发布

最新推荐文章于 2025-01-02 13:13:08 发布 · 735 阅读

文章标签：

#js select下拉框回显对应的文本显示出来 #js中select下拉框重置 #select不能触发change #select隐藏 #select默认 #tp6 select 不显示

题记：

------没有退路的时候，正是潜力发挥最大的时候。

P有图有真相

1需求来源

原生的select有很多样式不能随意改动，比如不能设置居中不生效，select框长度不能根据内容自适应等。而且在ios端和安卓端显示的样式不统一。所以为了解决以上问题，基于swiper对select进行了优化改进，改进后的样式可以随意设置，实现多端样式统一。

2html源码

需要在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>

3js源码

在你引入所有的js和css后，需要初始化一下方法，这个方法就是构造select选项的函数。