传统的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. 软工读书笔记 week 5 ——《构建之法》

    本周主要对<构建之法>中的一部分进行阅读. 一.软件与软件工程究竟是什么? 本书的概论部分就指出“软件 = 程序 + 软件工程”.而我们这门课的名字就叫“现代软件工程”.其实在上课之前,我 ...

  2. 基于bootstrap模态框的alert弹窗

    完成的效果如下: html代码: <!-- 弹出框 --> <div class="modal fade" id="alert_like" t ...

  3. SQL Server ->> 高可用与灾难恢复(HADR)技术之 -- Windows故障转移群集

    WSFC 群集 (WSFC cluster)“Windows Server 故障转移群集”(WSFC) 群集是一组独立的服务器,它们共同协作以提高应用程序和服务的可用性. 故障转移群集实例 (Fail ...

  4. ubuntu搭建LAMP全教程及简单使用

    一:安装: 参考:http://jingyan.baidu.com/article/a681b0de36ad683b18434691.html 本经验向你展示如何在ubuntu14.04 环境下搭建a ...

  5. Excel录入中实现单元格多选项自动下拉

    当我们在Excel表格中需要输入大量的重复数据时,往往利用数据的有效性来制作一个下拉菜单以提高重复数据的输入速度.但在实际的操作过程中,必须选中需要输入重复数据的单元格并单击该单元格右边的下拉箭头,才 ...

  6. 获取当前网页的的url

    如果测试的url地址是http://www.test.com/testweb/default.aspx, 结果如下: Request.ApplicationPath:                / ...

  7. 打通版微社区(6):部署微信插件及开通QQ云服务

    写在前面: 此文是我最后写的.其实实际部署的时候,我是先安装了论坛并试图开通微信的微社区.发现微社区需要在微信公众平台的开发者中心里配置 "网页账号,网页授权获取用户基本信息"为论 ...

  8. 将csv导出json格式

    将csv导出json格式 import os,csv,json cf = open('D:\OneDrive\\Tech\\Script\\Powershell_Script\\Uxin_work\\ ...

  9. css计数器 及 鼠标经过从中间扩散一个矩形(正方形长方形均可)

    <!DOCTYPE html> <html> <head> <title>css计数器--兼容IE8</title> <meta ch ...

  10. Java编程规范[转]

    目录 1       概述.... 5 1.1      目标:.... 5 1.2      原则:.... 5 2       Java编程命名规范.... 5 2.1      包的命名标准.. ...