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

我收到一个错误：未定义

Answer 1

您可以使用$(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="">

Answer 2

您也可以使用 jquery change事件处理程序而不是 javascript onchange属性。 使用这种方式，您可以在页面加载时触发更改事件并在页面加载时设置图像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="">