select 宽度跟随option内容自适应

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