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 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
Python学习思维导图(必看篇)
2017/06/26 Python
pycham查看程序执行的时间方法
2018/11/29 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
通息工程毕业生自荐信
2013/10/16 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
大学生村官演讲稿
2014/04/25 职场文书
小学生环保倡议书
2014/05/15 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
邀请函范文
2015/02/02 职场文书
java解析XML详解
2021/07/09 Java/Android