js下拉框选择图片
二种方式:下拉框里面选项有图片与没有图片
1.用下拉框写 下拉框的option没法添加图片如果下拉框里面不需要图片可以用这种方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
width:25px;
}
</style>
</head>
<body>
<img src="img/index.png"/>
<select >
<option value="img/index.png">首页</option>
<option value="img/logo.png">动漫</option>
<option value="img/select.png">电影</option>
<option value="img/loading.gif">博客</option>
</select>
<script>
var main=document.querySelector("select");
var img=document.querySelector("img");
main.onchange=function(){
img.setAttribute("src",this.value);
}
</script>
</body>
</html>
2.用列表模拟下拉框 下拉框里面需要图片可以用这种方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 250px;
}
.box-item{
height: 50px;
line-height: 50px;
}
.box-item img{
width: 25px;
vertical-align: middle;
}
ul{
display: none;
width: 100%;
list-style: none; }
li{
height: 30px;
line-height: 30px;
}
li:hover{
background: #FFC0CB;
}
li img{
width:25px;
vertical-align: middle;
} </style>
</head>
<body>
<div class="box">
<div class="box-item">
<img src="img/index.png"/>
请选择
</div>
<ul>
<li>
<img src="img/index.png"/>
首页
</li>
<li>
<img src="img/logo.png"/>
首页1
</li>
<li>
<img src="img/index.png"/>
首页2
</li>
</ul> </div>
<script>
var ul = document.querySelector("ul"); var boxContent = document.querySelector(".box-item");
//点击下拉框显示并阻止冒泡,防止触发document上写的隐藏下拉框函数
boxContent.onclick = function(e) {
var e = e || window.event;
ul.style.display = "block";
e.stopPropagation();
};
//选择选项替换你内容,并隐藏
for(var i=0;i<li.length;i++){
li[i].onclick=function(){
boxContent.innerHTML =this.innerHTML;
ul.style.display = "none";
}
}
//点击document隐藏下拉框 选择框显示但不做选择时点击页面选择框隐藏
document.onclick = function() {
ul.style.display = "none";
}
</script>
</body>
</html>
js下拉框选择图片的更多相关文章
- 将select的默认小三角替换成别的图片,且实现点击图片出现下拉框选择option
最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...
- 前端下拉框选择和动态生成调用div
进入到一个项目期中,一边做项目,一边学习其中用到的知识.这些知识都是零碎的,有数据库,有html,有js,还有django.趁周末时间,整理前面遇到过的前端相关的知识点. 下拉框选择 <html ...
- js下拉框二级关联菜单效果代码具体实现
这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- Python+selenium之获取文本值和下拉框选择数据
Python+selenium之获取文本值和下拉框选择数据 一.结合实例进行描述 1. 实例如下所示: #新增标签操作 def func_labels(self): self.driver.find_ ...
- 使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换
查看本章节 查看作业目录 需求说明: 使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换 实现思路: 在页面中添加 <select> 标签 ...
- js下拉框
Js下拉框 http://sc.chinaz.com/tag_jiaoben/XiaLaKuang.html
- select下拉框选择触发事件
我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...
- PHP下拉框选择的实现方法
实现 第一种PHP下拉框实现方法: < ?php //提交下拉框; //直接饱触发onchange事件的结果 $id=$_GET['myselect']; // myselect 为locati ...
- Selenium 3----警告框处理+下拉框选择
警告框处理 在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confi ...
随机推荐
- IOS订阅优惠-PHP生成ECDSA算法签名
<?php use Ramsey\Uuid\Uuid; class ItunesSignatureGenerator { private $appBundleID = 'www.u17.com' ...
- python3.7 安装Scrapy 失败问题
python的Scrapy框架,需要Twisted依赖以及VC++ 14 以上的环境,这些就不再赘述.讲讲今天安装Twisted和Scrapy遇到的其他问题. 首先就是直接安装Twisted成功后,安 ...
- @Transactional spring事务回滚相关
还可以设置回滚点,看下面 /** * 用户登录接口 * * * 1明确事务方法前的命名规则 * 2保证事务方法执行的时间尽可能的短,不允许出现循环操作,不允许出现RPC等网络请求操作 * 3不允许所有 ...
- <input> disabled 属性
定义和用法 disabled 属性规定应该禁用输入字段. 被禁用的输入字段是无法使用和无法点击的. 如果使用该属性,则会禁用输入字段. 可以对 disabled 属性进行设置,使用户在满足某些条件时( ...
- 第二章 单表查询 T-SQL语言基础(2)
单表查询(2) 2.2 谓词和运算符 T-SQL有几种不同的语言元素可以指定逻辑表达式,例如,查询过滤器(WHERE和HAVING),CHECK约束,等等. 在逻辑表达式中可以使用各种谓词(取值为TR ...
- leetcode 1051. Height Checker
Students are asked to stand in non-decreasing order of heights for an annual photo. Return the minim ...
- dubbo学习笔记四(异步调用)
相关资料 官方文档 项目结构 代码示例 [EchoTestApp] @RestController @SpringBootApplication @ImportResource("class ...
- pat (B)_1002
1002 写出这个数 (20 分) 读入一个正整数 n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式: 每个测试输入包含 1 个测试用例,即给出自然数 n 的值.这里保证 n 小于 1 ...
- textarea 限制输入字数
一般情况下很多人限制textarea的输入字数会使用 onkeyup 或 onchange事件,但是这两种事件都带有明显的不足. onkeyup 事件只能监听键盘事件,而对于用户的粘贴毫无办法:而on ...
- windows10 mysql主从复制配置
注意:mysql主从复制,主从版本要一致! 生手永远在学习的路上,为了学习mysql主从复制,实现读写分离,于是在本地安装多个mysql实例来进行验证. 也因此有了下面的笔记,一来自我总结一下经验,二 ...