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 相关文章推荐
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
vue使用节流函数的踩坑实例指南
May 20 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
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
javascript学习网址备忘
2007/05/29 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
Python常用列表数据结构小结
2014/08/06 Python
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
web页面录屏实现
2019/02/12 HTML / CSS
生产管理的三大手法
2013/11/11 职场文书
2014年冬季防火方案
2014/05/21 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
英文慰问信范文
2015/03/24 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers