JavaScript通过select动态更换图片的方法


Posted in Javascript onMarch 23, 2015

本文实例讲述了JavaScript通过select动态更换图片的方法。分享给大家供大家参考。具体分析如下:

下面的JS代码在select列表变化时触发SetBeerIcon()函数,SetBeerIcon()函数可以根据select选择的值动态修改图片

...
<script language="JavaScript" type="text/javascript" >
function setBeerIcon() {
 var beerIcon = document.getElementById("beerIcon");
 beerIcon.src = "images/"+getSelectValue("beer")+".jpg";
}
</script>
...
<img border="0" src="" id="brandIcon" alt="brand" />
<select name="beer" id="beer" onChange="setButton();setBeerIcon();">
<option value="--Select--">Select beer</option>
  <option value="heineken">heineken</option>
  <option value="sol">sol</option>
  <option value="amstellight">amstellight</option>
  <option value="coronalight">coronalight</option>
  <option value="coronaextra">coronaextra</option>
  <option value=""></option>
</select>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
用js实现随机返回数组的一个元素
Aug 13 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
微信小程序 教程之事件
Oct 18 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 #Javascript
浅谈jQuery中的事件
Mar 23 #Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 #Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 #Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 #Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 #Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 #Javascript
You might like
PHP中调用JAVA
2006/10/09 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
python检测服务器是否正常
2014/02/16 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
django 自定义过滤器的实现
2019/02/26 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python通过http下载文件的方法详解
2019/07/26 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
Ajax的优点和缺点
2014/11/21 面试题
优秀英语专业毕业生求职信
2013/11/23 职场文书
聚美优品的广告词
2014/03/14 职场文书
预备党员承诺书
2014/03/25 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
小英雄雨来观后感
2015/06/09 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers