select 宽度跟随option内容自适应

Posted 2021-01-20 sheep-sheep

传统的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值改变，将这个值放到那个容器里
    });