快捷導(dǎo)航

JavaScript通過(guò)select動(dòng)態(tài)更換圖片的方法

更新時(shí)間：2015年03月23日 09:10:04 作者：work24

這篇文章主要介紹了JavaScript通過(guò)select動(dòng)態(tài)更換圖片的方法,涉及javascript動(dòng)態(tài)操作圖片src的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JavaScript通過(guò)select動(dòng)態(tài)更換圖片的方法。分享給大家供大家參考。具體分析如下：

下面的JS代碼在select列表變化時(shí)觸發(fā)SetBeerIcon()函數(shù)，SetBeerIcon()函數(shù)可以根據(jù)select選擇的值動(dòng)態(tài)修改圖片

...
<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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript 模塊化編程(筆記)
這篇文章主要介紹了JavaScript 模塊化編程(筆記) ,需要的朋友可以參考下
2015-04-04
JS判斷用戶用的哪個(gè)瀏覽器實(shí)例詳解
這篇文章主要介紹了JS判斷用戶用的哪個(gè)瀏覽器的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-10-10
js取得html iframe中的元素和變量值
想要取得iframe中的元素和js變量值，不能用$(document).ready()方法，而是要用$("#iframeId").load()方法
2014-06-06
JavaScript自定義事件介紹
很多DOM對(duì)象都有原生的事件支持，向div就有click、mouseover等事件，事件機(jī)制可以為類的設(shè)計(jì)帶來(lái)很大的靈活性，相信.net程序員深有體會(huì)。隨著web技術(shù)發(fā)展，使用JavaScript自定義對(duì)象愈發(fā)頻繁，讓自己創(chuàng)建的對(duì)象也有事件機(jī)制，通過(guò)事件對(duì)外通信，能夠極大提高開(kāi)發(fā)效率
2013-08-08
three.js 入門(mén)案例詳解
本篇文章主要介紹了three.js 入門(mén)案例詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
8 個(gè)有用的JS技巧(推薦)
這篇文章主要介紹了8 個(gè)有用的JS技巧(推薦)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-07-07
JS中null和undefined的區(qū)別
在JavaScript中，null和undefined是兩個(gè)常見(jiàn)的數(shù)據(jù)類型，本文就詳細(xì)的介紹了JS中null和undefined的區(qū)別，感興趣的可以了解一下
2023-05-05
微信小程序日歷/日期選擇插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序日歷和日期選擇插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
JavaScript實(shí)現(xiàn)同步于本地時(shí)間的動(dòng)態(tài)時(shí)間顯示方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)同步于本地時(shí)間的動(dòng)態(tài)時(shí)間顯示方法,實(shí)例分析了javascript獲取本地時(shí)間及動(dòng)態(tài)顯示的技巧,并對(duì)實(shí)現(xiàn)代碼進(jìn)行了較為詳盡的分析說(shuō)明,需要的朋友可以參考下
2015-02-02
手寫(xiě)的一個(gè)兼容各種瀏覽器的javascript getStyle函數(shù)(獲取元素的樣式)
這篇文章主要介紹了手寫(xiě)的一個(gè)兼容各種瀏覽器的javascript getStyle函數(shù),用來(lái)取元素的樣式,需要的朋友可以參考下
2014-06-06