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