select 宽度跟随option内容自适应

Posted sheep-sheep

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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值改变,将这个值放到那个容器里
    });






以上是关于select 宽度跟随option内容自适应的主要内容,如果未能解决你的问题,请参考以下文章

css 左侧高度 跟随右侧内容高度 自适应

CSS使图片自适应显示宽度代码怎么用?

DIV+CSS如何实现三列宽度自适应

如何让iframe里面的内容宽度自适应

iOS tableView跟随内容高度自适应变化

android webview控件,当控件宽度较小时,自适应问题