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 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
JavaScript函数详解
Feb 27 Javascript
图解js图片轮播效果
Dec 20 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
ES5和ES6中类的区别总结
Dec 21 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
咖啡的传说和历史
2021/03/03 新手入门
php基础教程 php内置函数实例教程
2012/08/21 PHP
destoon各类调用汇总
2014/06/20 PHP
php正则表达式学习笔记
2015/11/13 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
Joomla开启SEF的方法
2016/05/04 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
短信提示使用 特效
2007/01/19 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
详解python中的线程与线程池
2019/05/10 Python
pandas数据处理进阶详解
2019/10/11 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
优质的学校老师推荐信
2013/10/28 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
python3美化表格数据输出结果的实现代码
2021/04/14 Python