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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 Javascript
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读取xml方法介绍
2013/01/12 PHP
详解php中的implements 使用
2017/06/13 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
PHP实现递归的三种方法
2020/07/04 PHP
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
javascript模拟命名空间
2015/04/17 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
Python yield 小结和实例
2014/04/25 Python
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
在Python中移动目录结构的方法
2016/01/31 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python如何求解两数的最大公约数
2018/09/27 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
服务之星获奖感言
2014/01/21 职场文书
给公司的建议书范文
2014/05/13 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL