我想在用户选择图像后动态显示它。不同的选项是从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="">
但是现在我需要发布一个Id而不是图像名称。我已经尝试过:
<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="">
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句