解决select宽度跟随option宽度变化而变化的方法
时间:2018-11-15
本文章向大家介绍解决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值改变,将这个值放到那个容器里
});
- 上市公司*ST华泽官网打不开,域名已被挂出售卖
- Asp.Net4.0/VS2010新变化(4):SEO的改进
- Pandas DataFrame笔记
- 让控件填满整个页面
- 用多个类别来进行微调
- Asp.Net4.0/VS2010新变化(2):网站自动预热
- Asp.Net4.0/VS2010新变化(1):web.config与publish
- 任天堂将推出Nintendo Labo 域名保护意识墙
- 表格效果
- ROR学习笔记(2):Asp.Net开发者看ROR
- 图片的javascript延时加载
- 全世界最短IE判定if(!+[1,])的解释
- Log4Net与Log2Console配合时中文问题的解决
- 如何改变AspNetPager当前页码的默认红色?
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Semaphore加锁与释放流程
- ReentrantLock加锁与释放过程
- 使用vue-cli4快速搭建vue项目demo
- Vue实现pc/H5弹窗拖拽
- 微信小程序skeleton骨架屏
- 微信小程序锚点选择导航栏
- vue-ripple-directive点击水波纹
- dubbo学习之源码创建属于自己的dubbo-demo
- Vue4.x配置env开发环境、测试环境、生产环境
- SpringBoot总结之CommandLineRunner
- 详细整理Spring事务失效的具体场景及解决方案
- Vue监听文本框实时输入限制输入长度
- 30 分钟轻松搞定正则表达式基础
- Vant引入CDN实现图片懒加载
- Js时间戳倒计时天时分秒