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内容自适应的更多相关文章
- select标签中option内容加链接
1.Html页面代码 <select name="select" id="select" style="height: 25px; width: ...
- CSS侧边栏宽度不动(更改页面宽度时),内容区宽度自适应
一个页面,左栏是内容栏content,右栏是侧边栏sidebar.如何使侧边栏宽度不动(更改页面宽度时),内容区宽度自适应呢?为了保证内容区宽度自适应,先不设定其宽度,使其填充整个DIV区域,设定足够 ...
- IE8 下 select option 内容过长 , 展开时信息显示不全解决办法
IE8 下 select option 内容过长 , 展开时信息显示不全 , 简单折衷的方式就是给 option 加上 title 属性 , 但是又不想一个个的修改,怎么办呢,代码如下 : //sel ...
- CSS实现输入框宽度随内容自适应效果
有时候我们会遇到如下需求:输入框的宽度随内容长度自适应,当输入框宽度增大到一定值时,里边的内容自动隐藏. 面对这种需求,我们首先想到的是使用input元素标签,但是发现input标签的宽度默认设定的是 ...
- 下拉框——把一个select框中选中内容移到另一个select框中遇到的问题
在使用jQuery实现把一个select框中选中内容移到另一个select框中功能时遇到了一个问题,就是点击按钮时内容可以到另一个select框中,但是到了另一个select框中的内容却很快闪退回原来 ...
- jquery新增,删除 ,修改,清空select中的option
jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...
- JS对select动态添加option操作 (三级联动) (搜索拼接)
以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...
- HTML中的select下拉框内容显示不全的解决办法
HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...
- Delphi xe8 FMX StringGrid根据内容自适应列宽。
Delphi xe8 FMX StringGrid根据内容自适应列宽. 网上的资料比较复杂,而且不是根据字体字号等设置列宽.故自己写了个function来用. function GetColMaxDa ...
随机推荐
- Oracle 给字符串补空格、补0
利用lpad().RPAD()函数来实现给字符串补空格或补0的功能: 一.lpad()lpad函数将左边的字符串填充一些特定的字符其语法格式如下:lpad(string,n,[pad_string]) ...
- elasticsearch集群搭建报错: not enough master nodes discovered during pinging
自己用一台 阿里云 服务器 搭建ES集群的时候,总是报上面的问题. 而且两个ES服务都是报同样的问题.自己的配置文件如下: es服务1配置文件 cluster.name: elasticsearch ...
- js时间戳转换日期
//js时间戳转换日期function formatDate(now) { var year=now.getFullYear(); var month=now.getMonth()+1; var da ...
- ActiveMQ queue 代码示例
生产者: package com.111.activemq; import javax.jms.Connection; import javax.jms.ConnectionFactory; impo ...
- 【Leetcode】【hard】Binary Tree Postorder Traversal
Given a binary tree, return the postorder traversal of its nodes' values. For example:Given binary t ...
- 快速设置UITableView不同section对应于不同种类的cell
快速设置UITableView不同section对应于不同种类的cell 本文主要是为了写明如何在UITableView中,一个section对应于一种类型的cell,写起来不凌乱. 在不封装任何类的 ...
- hbase shell基础和常用命令详解
HBase是Google Bigtable的开源实现,它利用Hadoop HDFS作为其文件存储系统,利用Hadoop MapReduce来处理HBase中的海量数据,利用Zookeeper作为协同服 ...
- 沉淀,再出发:结合案例看python
沉淀,再出发:结合案例看python 一.前言 关于python,如果不经过大型程序开发的洗礼,我们很难说自己已经懂得了python了,因此,我们需要通过稍微结构化的编程来学习python. 二.一个 ...
- Samba文件共享服务器配置
Samba起源: 早期网络想要在不同主机之间共享文件大多要用FTP协议来传输,但FTP协议仅能做到传输文件却不能直接修改对方主机的资料数据,这样确实不太方便,于是便出现了NFS开源文件共享程序:NFS ...
- [朴孝敏/Loco][Nice Body]
歌词来源:http://music.163.com/#/song?id=28738294 作曲 : 勇敢兄弟/大象王国 [作曲 : 勇敢兄弟/大象王国] 作词 : 勇敢兄弟 [作词 : 勇敢兄弟] A ...