根据select的data-*属性更改图片img的src链接JQ实例

根据select的data-*属性更改图片img的src链接JQ实例

浏览次数:
作者: 墨鱼
信息来源: 本站原创
更新日期: 2023-05-10 17:12:49
文章简介

使用jQuery,根据select元素的data-*属性动态更改图片img的src链接。通过监听select变化,获取所选option的data属性,并更新对应图片的src,实现图片的动态切换,提升用户体验。

  • 正文开始
  • 相关阅读
  • 推荐作品

直接上实例代码:

<img id="brandIcon" src="" />   
<script language="JavaScript" type="text/javascript" >    
function setBeerIcon() {    
var classimg = $("#beer").find("option:selected").attr('data-img');       
$("#brandIcon").attr("src",classimg);    
}    
</script>
<form>
<select id="beer" onChange="setBeerIcon();">    
<option value="1" data-img="/images/1.jpg">项目一</option>    
<option value="2" data-img="/images/2.jpg">项目二</option>    
<option value="3" data-img="/images/3.jpg">项目三</option>    
</select>    
</form>


UEditor编辑器自动追加p标签 br标签 标签自动转义等解决办法
« 上一篇 2023年03月14日
分享一个简单大方的公告提示HTML页面
下一篇 » 2023年12月18日

如本文对您有帮助,就请墨鱼抽根烟吧!