Jquery:基于下拉选择值动态更改img src

Question

我想在用户选择图像后动态显示它。不同的选项是由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="">

我得到了一个错误:undefined

Answer 1

您可以使用$(this).find('option:selected').data('img')来获取所选择的选项data-attribute。

演示代码 :

<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="">

Answer 2

也可以使用jquerychange事件处理程序代替javascriptonchange属性。使用这种方式，您可以在页面加载时触发更改事件，并在页面加载时设置图像src。

$("#SelectLogo").change(function(){
$("#logo").attr("src", '/images/'+$(":selected", this).data('img'));
}).change();

$("#SelectLogo").change(function(){
$("#logo").attr("src", '/images/'+$(":selected", 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="">