传统的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内容自适应的更多相关文章

  1. select标签中option内容加链接

    1.Html页面代码 <select name="select" id="select" style="height: 25px; width: ...

  2. CSS侧边栏宽度不动(更改页面宽度时),内容区宽度自适应

    一个页面,左栏是内容栏content,右栏是侧边栏sidebar.如何使侧边栏宽度不动(更改页面宽度时),内容区宽度自适应呢?为了保证内容区宽度自适应,先不设定其宽度,使其填充整个DIV区域,设定足够 ...

  3. IE8 下 select option 内容过长 , 展开时信息显示不全解决办法

    IE8 下 select option 内容过长 , 展开时信息显示不全 , 简单折衷的方式就是给 option 加上 title 属性 , 但是又不想一个个的修改,怎么办呢,代码如下 : //sel ...

  4. CSS实现输入框宽度随内容自适应效果

    有时候我们会遇到如下需求:输入框的宽度随内容长度自适应,当输入框宽度增大到一定值时,里边的内容自动隐藏. 面对这种需求,我们首先想到的是使用input元素标签,但是发现input标签的宽度默认设定的是 ...

  5. 下拉框——把一个select框中选中内容移到另一个select框中遇到的问题

    在使用jQuery实现把一个select框中选中内容移到另一个select框中功能时遇到了一个问题,就是点击按钮时内容可以到另一个select框中,但是到了另一个select框中的内容却很快闪退回原来 ...

  6. jquery新增,删除 ,修改,清空select中的option

    jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...

  7. JS对select动态添加option操作 (三级联动) (搜索拼接)

    以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...

  8. HTML中的select下拉框内容显示不全的解决办法

    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...

  9. Delphi xe8 FMX StringGrid根据内容自适应列宽。

    Delphi xe8 FMX StringGrid根据内容自适应列宽. 网上的资料比较复杂,而且不是根据字体字号等设置列宽.故自己写了个function来用. function GetColMaxDa ...

随机推荐

  1. Oracle 给字符串补空格、补0

    利用lpad().RPAD()函数来实现给字符串补空格或补0的功能: 一.lpad()lpad函数将左边的字符串填充一些特定的字符其语法格式如下:lpad(string,n,[pad_string]) ...

  2. elasticsearch集群搭建报错: not enough master nodes discovered during pinging

    自己用一台 阿里云 服务器 搭建ES集群的时候,总是报上面的问题. 而且两个ES服务都是报同样的问题.自己的配置文件如下: es服务1配置文件 cluster.name: elasticsearch ...

  3. js时间戳转换日期

    //js时间戳转换日期function formatDate(now) { var year=now.getFullYear(); var month=now.getMonth()+1; var da ...

  4. ActiveMQ queue 代码示例

    生产者: package com.111.activemq; import javax.jms.Connection; import javax.jms.ConnectionFactory; impo ...

  5. 【Leetcode】【hard】Binary Tree Postorder Traversal

    Given a binary tree, return the postorder traversal of its nodes' values. For example:Given binary t ...

  6. 快速设置UITableView不同section对应于不同种类的cell

    快速设置UITableView不同section对应于不同种类的cell 本文主要是为了写明如何在UITableView中,一个section对应于一种类型的cell,写起来不凌乱. 在不封装任何类的 ...

  7. hbase shell基础和常用命令详解

    HBase是Google Bigtable的开源实现,它利用Hadoop HDFS作为其文件存储系统,利用Hadoop MapReduce来处理HBase中的海量数据,利用Zookeeper作为协同服 ...

  8. 沉淀,再出发:结合案例看python

    沉淀,再出发:结合案例看python 一.前言 关于python,如果不经过大型程序开发的洗礼,我们很难说自己已经懂得了python了,因此,我们需要通过稍微结构化的编程来学习python. 二.一个 ...

  9. Samba文件共享服务器配置

    Samba起源: 早期网络想要在不同主机之间共享文件大多要用FTP协议来传输,但FTP协议仅能做到传输文件却不能直接修改对方主机的资料数据,这样确实不太方便,于是便出现了NFS开源文件共享程序:NFS ...

  10. [朴孝敏/Loco][Nice Body]

    歌词来源:http://music.163.com/#/song?id=28738294 作曲 : 勇敢兄弟/大象王国 [作曲 : 勇敢兄弟/大象王国] 作词 : 勇敢兄弟 [作词 : 勇敢兄弟] A ...