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

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

浏览次数:
作者: 墨鱼
信息来源: 本站原创
更新日期: 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>


关联内容: select data 属性 图片 src JQ 实例
UEditor编辑器,解决自动追加p、br标签及标签自动转义的实用方案
« 上一篇 2023年03月14日
【简洁大方】公告提示HTML页面分享,快速构建优雅公告界面
下一篇 » 2023年12月18日

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