select 宽度跟随option内容自适应 |
您所在的位置：网站首页 › select的宽度设置 › select 宽度跟随option内容自适应 |
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下拉列表的情况。 具体代码如下： 测试 测试 测试 我是最长的测试 默认值 .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值改变，将这个值放到那个容器里 }); |
【本文地址】
今日新闻 |
推荐新闻 |