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

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. spark教程(四)-SparkContext 和 RDD 算子

    SparkContext SparkContext 是在 spark 库中定义的一个类,作为 spark 库的入口点: 它表示连接到 spark,在进行 spark 操作之前必须先创建一个 Spark ...

  2. solr学习笔记-增加mmesg4J中文分词

    solr版本6.1.centos6.7.mmesg4j版本2.30 solr安装目录:/usr/local/solr-6.1.0 1.下载mmesg4j包: 地址:https://github.com ...

  3. hadoop离线数据存储和挖掘架构

    前序: 当你把你知道的东西,写下来,让人看明白是一种境界:当你能把自己写下来的东西给人讲明白,又是另一种境界.在这个过程中,我们都需要历练. 基于hadoop集群下海量离线数据存储和挖掘分析架构: 架 ...

  4. 第十八篇 JS传参数

    JS传参数   参数,这是个什么东西呢?简单的说吧,我们去玩别人的网站,一般来个登录,有用户名和密码,当我们输入正确之后,那么这用户名和密码里面的值,就是参数的值,它将这个值传给“参数”,然后提交到后 ...

  5. vue改变数据视图刷新问题

    有时候我们会碰到数据已经更新了但是视图不更新的问题 1.根属性不存在,而想要直接给根属性赋值导致的视图不更新 解决:初始化属性的时候给根属性初始化一个空值就可以了 2.数组视图不更新 通过以下几个方法 ...

  6. 颜色框架Hue使用方法

    Hue地址 如果有疑问或者想探讨iOS开发相关的技术,十分欢迎. 1. cocoapods安装Hue pod "Hue" 2. 导入框架 import Hue 3. 将十六进制数字 ...

  7. maven 学习之路之二(1)

    上次我简单讲了maven的安装和构建生命周期. 这一篇博客我将用实际项目来分享下maven整个构建生命周期的具体使用: 这次我将用maven做一个自己写程序的一个模版程序. 自己实现一个简单的页面登录 ...

  8. springboot中使用servlet通过配置类

    在servlet目录下创建个servlet类,示例代码如下: package com.bjpowernode.springboot.servlet; import javax.servlet.Serv ...

  9. Android图像处理之图形特效处理

    一.Android变形矩阵——Matricx: 跟Android图像的色彩处理基本一样,只是将ColorMatrix换成了Matrix,ColorMatrix是4*5的矩阵,Matrix是3*3的.每 ...

  10. linux下编译安装SDL2和ffmpeg

    首先安装sudo apt-get install libsdl2-dev ./configure --prefix=/tools/SDL2 make && make install $ ...