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

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

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

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

下面的JS代碼在select列表變化時觸發(fā)SetBeerIcon()函數(shù)，SetBeerIcon()函數(shù)可以根據(jù)select選擇的值動態(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>

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

您可能感興趣的文章:

相關(guān)文章

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