如何解决Jquery:根据下拉选择的值动态更改 img src
我想在用户选择后动态显示图像。不同的选项是从 sql 查询生成的。
当我将图像指定为值时它起作用:
<select id="Selectlogo" onchange="document.getElementById('logo').src='/images/'+this.value" >
<option value="img1.png">Image 1</option>
<option value="img2.png">Image 2</option>
<option value="img3.png">Image 3</option>
</select>
<img id="logo" src="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="Selectlogo" onchange="document.getElementById('logo').src='/images/'+$(this).attr('data-img')" >
<option value="1" data-img="img1.png">Image 1</option>
<option value="2" data-img="img2.png">Image 2</option>
<option value="3" data-img="img3.png">Image 3</option>
</select>
<img id="logo" src="">
出现错误:未定义
解决方法
您可以使用 $(this).find('option:selected').data('img')
获取所选选项的数据属性。
演示代码:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="SelectLogo" onchange="document.getElementById('logo').src='/images/'+$(this).find('option:selected').data('img')" >
<option value="1" data-img="img1.png">Image 1</option>
<option value="2" data-img="img2.png">Image 2</option>
<option value="3" data-img="img3.png">Image 3</option>
</select>
<img id="logo" src="">
您也可以使用 jquery change
事件处理程序代替 javascript onchange
属性。使用这种方式,您可以在页面加载时触发更改事件并在页面加载时设置图像 src
。
$("#SelectLogo").change(function(){
$("#logo").attr("src",'/images/'+$(":selected",this).data('img'));
}).change();
$("#SelectLogo").change(function(){
$("#logo").attr("src",this).data('img'));
console.log($("#logo").attr("src"));
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="SelectLogo">
<option value="1" data-img="img1.png">Image 1</option>
<option value="2" data-img="img2.png">Image 2</option>
<option value="3" data-img="img3.png">Image 3</option>
</select>
<img id="logo" src="">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。