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值改變，將這個值放到那個容器里
    });