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

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. 【Usaco2014Open银组】双导航(gpsdual)

    题目 [题目描述] FJ 最近网购了一台小车.但是由于他的草率,在选择加装物品时偶然地点击了两次"Submit" ,结果最后他的小车装了两台GPS 导航系统!更糟的是,这两个系统对 ...

  2. python实现更换电脑桌面壁纸，锁屏，文件加密方式

    python实现更换壁纸和锁屏代码 #控制windows系统 import win32api,win32con,win32gui # 可以利用python去调用dll动态库的包.嵌入式开发 from ...

  3. spark教程(二)-shell操作

    spark 支持 shell 操作 shell 主要用于调试,所以简单介绍用法即可 支持多种语言的 shell 包括 scala shell.python shell.R shell.SQL shel ...

  4. SQLAlchemy技术手册

    一.ORM 框架简介 对象-关系映射(Object/Relation Mapping,简称ORM),是随着面向对象的软件开发方法发展而产生的.面向对象的开发方法是当今企业级应用开发环境中的主流开发方法 ...

  5. java实现spark常用算子之join

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaPairRDD;import org.apache.spa ...

  6. Express multer 文件上传

    npm multer 文件上传 Express app 范本就不写了,仅记录一下上传部分的代码. const fs = require('fs'); const express = require(' ...

  7. web-CSS居中大全

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  8. Idea java 程序打jar包（maven）

    1.准备好控制台程序 2.引用的项目打包(公共类接口) 3.开发打包 点击运行 打包结果如下

  9. Hyperledger Fabric（4）链码ChainCode

    智能合约,是一个抽象的概念,智能合约的历史可以追溯到 1990s 年代.它是由尼克萨博(Nick Szabo)提出的理念,几乎与互联网同龄. 我们这里所说的智能合约只狭义的指区块链中.它能够部署和运行 ...

  10. docker 网络 实现

    最近在学习docker网络相关的知识,关于网络这块儿记下来,以便review dokcer安装完成之后默认提供三种网络  bridge host none  docker默认使用bridge brid ...