select表单元素详解及下拉列表模拟实现
原文地址:→看过来
写在前面
select 是HTML表单元素中很常用的一个,其中很重要的几个属性常被忽略,但这几个属性却能帮助我们完成很多的功能,当然,select下拉列表默认样式很不友好,所以更多的时候可以自己模拟实现一个同样功能的下拉菜单。下文先介绍select标签的一些属性及使用,后面再模拟一个相同效果的下拉菜单。
介绍之前先看下demo预览图:
firefox下select的默认样式:
chrome下select的默认样式:
firefox下自定义select下拉列表的icon效果:
chrome下自定义select下拉列表的icon效果:
原生js模拟select下拉列表的实现效果(chrome及firefox效果一致):
源代码地址→传送门
预览地址→传送门
1. select表单元素及相关属性(我只是大自然的搬运工)
提示
select 元素是一种表单控件,可用于在表单中接受用户输入支持的全局属性
- 仅挑几个属性
- autofocus(其值为autofocus): 规定在页面加载后文本区域自动获得焦点。
- disabled(值为disabled): 规定禁用该下拉列表。
- form(值为form_id): 规定文本区域所属的一个或多个表单。
- multiple(值为multiple): 规定可选择多个选项。
支持的事件属性
- 挑一个最常用到的额
- onchange:当select改变选择时调用的事件句柄。(可以实现三级联动的效果)
selected对象的属性及方法
- 挑几个重要的额
- options[]:返回包含下拉列表中的所有选项的一个数组。
- length:返回下拉列表中的选项数目。
- selectIndex:设置或返回下拉列表中被选项目的索引号。
- add(): 向下拉列表添加一个选项。
- remove(): 从下拉列表中删除一个选项。
option标签
- option元素定义下拉列表中的一个选项(一个条目)。
- disabled(值为disabled):规定此选项应在首次加载时被禁用。
- label(值为text):定义当使用 时所使用的标注。
- selected)(值为selected):规定选项(在首次显示在列表中时)表现为选中状态。
- value(text): 定义送往服务器的选项值。
option对象的属性
- 几个比较重要的额
- defaultSelected:返回 selected 属性的默认值。
- disabled:设置或返回选项是否应被禁用。
- index:返回下拉列表中某个选项的索引位置。
- selected:设置或返回 selected 属性的值。
注意:
- select本身的样式可用css设置,但对option设置的样式在chrome中不起作用,在Firefox可行
- w3c官网的详细解释 → 传送门
2. HTML标签自定义属性(纯属题外话)
HTML5 data-*自定义属性:添加data-前缀使属性变成自定义属性,最大的好处是我们可以把所有自定义属性在dataset对象中统一管理。
<div id="student" data-weight="98">点击显示</div>
var student = document.getElementById("student");
student.dataset.cm = '168'; //设置自定义属性
var stuWeight = studdent.dataset.weight; //获取自定义属性值
student.dataset.birthDate = '19980612'; //连字符的自定义属性 (例如设置data-birth-date)
3. 自定义下拉列表的图标
select默认样式中的下拉按钮不是很好看,我们可以自己用替张图片替换掉。(效果看文章上面的链接,请忽略我的丑丑的图标额)
- 对select自定义图标时需要设置apperance属性为
none
(隐藏原有小三角),并做兼容 - 加上将要替换的自定义图标即可
select{
-webkit-appearance: none; /*隐藏默认样式中的小三角*/
-moz-appearance: none;
background: url('http://opif0c56u.bkt.clouddn.com/select.gif') no-repeat scroll right 8px center;
}
- 可对option添加背景色
- 在firefox中可使用伪元素
:before
对option添加序号(此处插播一个css添加序号的方法)
select{
counter-reset: item; //类似于声明计数变量(声明在父元素中)
}
select option:before {
counter-increment: item; //要使用的计数名
content: counter(item) " . "; //追加前置序号,chrome对option的设置中不起作用
}
4. js模拟select下拉菜单(重头戏)
许多时候会觉得select表单特别的不好用,不能自己添加很多的样式,小伙伴们还是自己模拟一个吧!
- html代码结构:
<div id="sel-wrap">
<div id="sel-show">=请选择=</div>
<ul id="sel-option">
<li class="item">早上吃包子</li>
<li class="item">中午吃米饭</li>
<li class="item">晚上吃面条</li>
<li class="item">宵夜吃烧烤</li>
<li class="item">睡前喝牛奶</li>
</ul>
</div>
下拉按钮的图标跟上面自定义的方式一致(这里不再说了)。
hover到li上时,利用伪元素
:before
追加一个对勾。
#sel-option li:hover:before {
content: '\2714' ' '; //此处为对勾+空格
}
- 下面说下实现原理:
- 下拉菜单的选项为ul中的内容,需要先隐藏起来,且显示的时候是浮在其他内容的上面,此处需要使用position来实现。(即脱离文档流)
#sel-wrap{
position: relative; //设置父元素
}
#sel-option{
position: absolute; //设置下拉列项的包裹层
}
点击下拉框时显示下拉列表项
点击列表项时将选中值传递给下拉框并显示,同时下拉项收起(此处的点击事件绑定在父元素中)
当下拉项显示并未选中任何下拉项时,点击下拉框收起下拉项
当下拉项显示并未选中任何下拉项时,点击下拉项以外的任意位置,收起下拉框
最终实现(样式什么的都可以随便改):
小结
- 小花作为菜鸟第一次自己模拟下拉列表的实现,有可能存在代码欠缺,但是为了方便以后使用的时候查询,所以就记录下
- 欢迎大佬们指点
select表单元素详解及下拉列表模拟实现的更多相关文章
- html5表单元素详解
表单是Html中获取用户输入的手段.此文对表单的元素进行了详细整理. 表单基本元素 form input button form元素 html4中,form元素相当于表单的外包装,其他都要在里面.ht ...
- html表单元素及表单元素详解
原文 https://www.jianshu.com/p/b427daa8663d 大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素——文本框 5.表单元素button 6.表单 ...
- vue.js基础知识篇(7):表单校验详解
目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...
- 【转】vue.js表单校验详解
官方文档:https://monterail.github.io/vuelidate/ https://github.com/monterail/vuelidate 1.npm安装vue-valida ...
- Django基础,Day5 - form表单投票详解
投票URL polls/urls.py: # ex: /polls/5/vote/ url(r'^(?P<question_id>[0-9]+)/vote/$', views.vote, ...
- Django表单API详解
声明:以下的Form.表单等术语都指的的广义的Django表单. Form要么是绑定了数据的,要么是未绑定数据的. 如果是绑定的,那么它能够验证数据,并渲染表单及其数据,然后生成HTML表单.如果未绑 ...
- 第四章:Django表单 - 2:Django表单API详解
声明:以下的Form.表单等术语都指的的广义的Django表单. Form要么是绑定了数据的,要么是未绑定数据的. 如果是绑定的,那么它能够验证数据,并渲染表单及其数据,然后生成HTML表单.如果未绑 ...
- tornado中form表单验证详解
#!/usr/bin/env python# _*_ coding:utf-8 _*_import tornado.webimport tornado.ioloopimport re class Ba ...
- [转]CSS 表单元素对齐详解
来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...
随机推荐
- 2018软工实践—Alpha冲刺(9)
队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 多次测试软件运行 学习OPENMP ...
- Java微笔记(6)
- HDU 5159 Card
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5159 题解: 考虑没一个数的贡献,一个数一次都不出现的次数是(x-1)^b,而总的排列次数是x^b, ...
- 【前端学习笔记02】JavaScript字符串、数组的一些操作方法
字符串操作: //str.length "micromajor".length // 10 //str.charAt() "micromajor".charAt ...
- Web前端面试宝典(最新)
第一部分:HTML问答题 1.简述一下你对HTML语义化的理解? 用正确的标签做正确的事情. html语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析;即使在没有样式CSS情况下也 ...
- 第99天:CSS3中透视perspective
CSS3中透视perspective 透视原理: 近大远小 . 浏览器透视:把近大远小的所有图像,透视在屏幕上. 理解浏览器的坐标系:浏览器平面为 Z=0的平面,坐标原点默认为图片的中心,可以通过更改 ...
- HDU4055_Number String
题目告诉你在一个排列中,相邻两个数的大小关系.问你排列可能有多少种情况. DP. f[i][j]表示将i个数按照前面i-1个大小关系排列且最后一个数位j的排列数有多少个. 这样对于新加入的一个数i+1 ...
- 最小费用流spfa最小费用路算法模板(pascal)
3.30: 这篇是以前写的,用的还是指针存图,今天又写了个代码,码风稍微好看点. 传送门:http://www.cnblogs.com/Currier/p/6648685.html --------- ...
- C++解析(15):二阶构造模式
0.目录 1.构造函数与半成品对象 2.二阶构造 3.小结 1.构造函数与半成品对象 关于构造函数: 类的构造函数用于对象的初始化 构造函数与类同名并且没有返回值 构造函数在对象定义时自动被调用 问题 ...
- P1407 [国家集训队]稳定婚姻
题目描述 我国的离婚率连续7年上升,今年的头两季,平均每天有近5000对夫妇离婚,大城市的离婚率上升最快,有研究婚姻问题的专家认为,是与简化离婚手续有关. 25岁的姗姗和男友谈恋爱半年就结婚,结婚不到 ...