传统的select在没有设置固定宽度的情况,会因为自身的 option 选项的里,宽度最宽的option作为select本身的宽度
例如
可见效果为:
select的宽度因为“宽度最宽的option作为select本身的宽度”导致select变宽
但是这跟我们想要的select宽度跟随option内容自适应,相违背
解决方案:
很普遍的,大家会选择用js来控制select的宽度。大概是判断option的内容长度,然后js控制select宽度
而这里讲的自适应,是做一个select的容器
大致的设计为:
主要是通过css+js来实现
红色框表示一个假的select容器div,div会因为,自身内容而自动宽度。
而我们要做的就是将蓝色框的真正select,做一个彻底透明和隐藏,当我们点击div的时候,其实点击的是select本身,由于select被透明化,所以我们会看到点击红色框div的时候,
出现option下拉列表的情况。
具体代码如下:
<div class="fake-select"> <select name="select"> <option>测试</option> <option>测试</option> <option>测试</option> <option>我是最长的测试</option> </select> <div class="select-show-text"> <div class="j-select-slot placeholder">默认值</div> </div> </div>
.fake-select { position: relative; } .fake-select > select { width: 100%; height: 100%; left: 0; top: 0; position: absolute; background: transparent !important; color: transparent !important; z-index: 1; }
function fake(opts){ let { element = '.fake-select', slot = '.j-select-slot', } = opts; let select = $(element).find('select'); select.on('change', function () { let $this = $(this); let val = $this.find('option:selected').val(); let text = $this.find('option:selected').text(); //$(this).siblings().find('.j-select-slot').text(val).removeclass('placeholder'); }) } fake({ element: '.fake-select', //表示包围这个select的父元素 slot: '.j-select-slot', //表示select值改变,将这个值放到那个容器里 });