二种方式:下拉框里面选项有图片与没有图片

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下拉框选择图片的更多相关文章

  1. 将select的默认小三角替换成别的图片,且实现点击图片出现下拉框选择option

    最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...

  2. 前端下拉框选择和动态生成调用div

    进入到一个项目期中,一边做项目,一边学习其中用到的知识.这些知识都是零碎的,有数据库,有html,有js,还有django.趁周末时间,整理前面遇到过的前端相关的知识点. 下拉框选择 <html ...

  3. js下拉框二级关联菜单效果代码具体实现

    这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  4. Python+selenium之获取文本值和下拉框选择数据

    Python+selenium之获取文本值和下拉框选择数据 一.结合实例进行描述 1. 实例如下所示: #新增标签操作 def func_labels(self): self.driver.find_ ...

  5. 使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换

    查看本章节 查看作业目录 需求说明: 使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换 实现思路: 在页面中添加 <select> 标签 ...

  6. js下拉框

    Js下拉框   http://sc.chinaz.com/tag_jiaoben/XiaLaKuang.html

  7. select下拉框选择触发事件

    我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...

  8. PHP下拉框选择的实现方法

    实现 第一种PHP下拉框实现方法: < ?php //提交下拉框; //直接饱触发onchange事件的结果 $id=$_GET['myselect']; // myselect 为locati ...

  9. Selenium 3----警告框处理+下拉框选择

    警告框处理 在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confi ...

随机推荐

  1. 2019年8月22日 星期四(怎样成为PHP大牛)

    1.服务器方面,各种PHP部署方案烂熟,Lvs,keepalived,nginx,apache,docker,换句话说其战力值相当于一个高级运维,迅速定位并排除PHP运行中的各种问题. 2.数据库方面 ...

  2. 使用jdbc操作ClickHouse

    使用jdbc操作ClickHouse 2018年07月01日 01:33:00 狮子头儿 阅读数 10501   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处 ...

  3. 08 nginx+uWSGI+django+virtualenv+supervisor发布web服务器

    一.为什么要用nginx,uwsgi? 1 首先nginx 是对外的服务接口,外部浏览器通过url访问nginx, 2nginx 接收到浏览器发送过来的http请求,将包进行解析,分析url,如果是静 ...

  4. java的移位和异或运算

    Java移位运算种类 基础:我们知道在Java中int类型占32位,可以表示一个正数,也可以表示一个负数.正数换算成二进制后的最高位为0,负数的二进制最高为为1 例子: -5换算成二进制后为:1111 ...

  5. selenium 模拟登陆豆瓣,爬取武林外传的短评

    selenium 模拟登陆豆瓣,爬去武林外传的短评: 在最开始写爬虫的时候,抓取豆瓣评论,我们从F12里面是可以直接发现接口的,但是最近豆瓣更新,数据是JS异步加载的,所以没有找到合适的方法爬去,于是 ...

  6. linux shell 数组的使用

    引言 在Linux平台上工作,我们经常需要使用shell来编写一些有用.有意义的脚本程序.有时,会经常使用shell数组.那么,shell中的数组是怎么表现的呢,又是怎么定义的呢?接下来逐一的进行讲解 ...

  7. 2019-2020-1 20199319《Linux内核原理与分析》第四周作业

    MenuOS的构造 基础知识 1.操作系统的两把宝剑:①中断上下文的切换:保存现场和恢复现场:②进程上下文的切换. 2.Linux内核以A.B.C.D方式命名:A和B变得无关紧要,C是内核的真实版本, ...

  8. 华为ensp问题:云映射本地网卡,直连路由器可以ping通,pc却不行?

    拓扑图:cloud 云映射本机物理网卡:192.168.56.1     R1可以Ping通,所有Pc都不行,路由表也存在路由信息,不知道什么问题?

  9. jekens安装

    https://jenkins.io/zh/download/ Generic Java package (.war) 下载jenkins.war文件 将jenkins.war发布到tomcat服务器 ...

  10. 宝塔linux面板命令大全 - 宝塔面板

    安装宝塔 Centos安装脚本 yum install -y wget && wget -O install.sh http://download.bt.cn/install/inst ...