html下拉框 js选中,js实现select下拉框选择
最近在做一个项目需要兼容到ie不同版本,在使用select时遇到了各种问题。后来索性就自己使用原生js实现了这样一个下拉框,话不多说,直接上代码吧。
自定义select
*{
margin: 0;
padding: 0;
}
#main{
position: relative;
width: 280px;
height: 42px;
}
#content{
width: 280px;
height: 42px;
line-height: 42px;
padding-left: 10px;
background: rgb(255, 255, 255);
border-radius: 2px;
border: 1px solid rgb(221, 221, 221);
font-size: 16px;
font-family: MicrosoftYaHei;
color: rgb(51, 51, 51);
cursor: pointer;
}
#selectImg{
position: absolute;
top:13px;
right: 10px;
cursor: pointer;
}
#selectItem{
display: none;
border: 1px solid #eee;
width: 290px;
}
#selectItem ul{
list-style: none;
}
#selectItem ul li{
height: 30px;
line-height: 30px;
padding-left: 10px;
cursor: pointer;
}
#selectItem ul li:hover{
background-color:#f5f7fa;
}
var data = [{name:'北京',value:'1'},{name:'上海',value:'2'},{name:'广州',value:'3'}]
var content = document.getElementById('content');
var selectImg = document.getElementById('selectImg');
var selectItem = document.getElementById('selectItem');
var ul = document.createElement('ul');
selectItem.appendChild(ul);
for(var i = 0; i < data.length; i++){
var li = document.createElement('li');
li.setAttribute('data-value',data[i].value);
li.innerText = data[i].name;
ul.appendChild(li);
}
/**
* 点击下拉箭头
*/
selectImg.onclick = function () {
console.log(selectItem.style.display);
if(selectItem.style.display == 'none' || selectItem.style.display == ''){
selectItem.style.display = 'block';
}else{
selectItem.style.display = 'none';
}
}
content.onclick = function () {
if(selectItem.style.display == 'none' || selectItem.style.display == ''){
selectItem.style.display = 'block';
}else{
selectItem.style.display = 'none';
}
}
var lis = selectItem.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++){
lis[i].onclick = function () {
console.log(this.innerHTML,this.getAttribute('data-value'));
content.innerText = this.innerHTML;
selectItem.style.display = 'none';
}
}
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
时间: 2020-01-08
html下拉框 js选中,js实现select下拉框选择相关推荐
- php下拉默认选中的值,select下拉框默认选中
这次给大家带来select下拉框默认选中,select下拉框默认选中的注意事项有哪些,下面就是实战案例,一起来看一下. 本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和 ...
- bootstrap获取下拉框数据_bootstrap动态调用select下拉框的实现方法
bootstrap动态调用select下拉框的实例代码 html代码: 填报部门: JS代码: /*获取下拉菜单*/ function showSel(){ $.ajax({ "type&q ...
- 下拉框的高度html,设置select下拉框高度的一种方法
这种方法可以设置下拉框最多显示几条栏目,多余的栏目用显示滚动条展示: 文学集 哲学 雅思 大学网奥数大学网奥数 文学集 哲学 雅思 大学网奥数 Layui:设置select下拉框自动选中某项 1.问题 ...
- html 下拉框高度,如何自定义设置select下拉框高度的优化方法
在项目开发中经常会遇到select下拉框优化问题,默认的样式简直难看到死,所以大家都会想到去设置select高度问题,当然一些组件或者插件也可以实现对其完美优化,我之前的一篇文章也写到了相关优化方法& ...
- php 复选框默认选中的值,PHP复选框默认值是什么 - php
最近,在使用复选框时,我必须经历以下测试代码: $myvalue = $_POST['myname']; echo $myvalue; } ?> 因此,提交表单后我得到的输出是,当选中复选框时, ...
- 复选框 遍历选中 php,jQuery的复选框选择并且获取值
这次给大家带来jQuery的复选框选择并且获取值,jQuery复选框选择并且获取值的注意事项有哪些,下面就是实战案例,一起来看一下. 一.checkbox选择 在jQuery中,选中checkbox通 ...
- html 判断复选框是否选中,jquery如何判断复选框是否选中?
jquery如何判断复选框是否选中?下面本篇文章给大家介绍一下jQuery判断复选框(checkbox)是否选中的几种方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jQuer ...
- html 点击文本框则选中,JS事件 内容选中事件(onselect)选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。...
内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...
- python selenium 下拉框 页面变化_python-selenium之select下拉框
注意哦,这里的下拉框是select 属性,小伙伴们别看见下拉框就觉得是select 总结 select 选择:select_by_index() :通过索引定位 select_by_value() ...
最新文章
- 网络爬虫流程与注意事项
- elasticsearch学习之路---Linux 下安装并启动elasticsearch
- 设计模式:常见模式案例
- android ip rule 策略路由,ip rule 策略路由
- javafx动画_JavaFX动画工具
- python 螺旋数组_奇技淫巧 - Python绘制各种简单优美曲线
- 关于QSS 看这一篇就够了!
- 利用matlab导入数据+命令行 快速选取excel部分内容
- 左手云通讯,右手AI,容联为何能成为云联络中心“风向标”?
- C# 调用中通快递查询物流轨迹接口
- 树莓派如何接硬盘_树莓派之挂载移动硬盘
- 手推向量投影长度、投影向量
- 数据小助手:DataAssistant开篇
- 在打开文章时,判断用户是否点赞或者收藏,切换显示点赞收藏图标;
- 汇编获取CPU的id
- 单引号,双引号,三引号的区别
- thread dump分析
- Python环境搭建以及简单入门介绍
- linux 查看 磁盘iops,linux 查看磁盘的iops
- python爬虫爬取B站【马保国】诶..朋友们好啊,我是混元形意太极门掌门人——马保国,独自一人撑起了B站2020年的年尾。
热门文章
- 甘超波:NLP亲子教育的本质
- K8S---Pod进阶资源限制以及探针
- Docker—苹果Mac安装Docker的两种方式
- 存储过程-浅尝辄止(游标使用)
- 友盟小米收不到推送消息_友盟推送SDK集成测试、常见问题以及注意事项总结
- AD10右下角显示标题
- vue中引入高德地图
- 2021年“春秋杯”新年欢乐赛--十二宫的挑衅
- java计算一元二次方程的根_java基础 --- 求一元二次方程的根(分情况讨论)-Go语言中文社区...
- sae项目服务器,sae服务器 mysql数据库