[英]Jquery: dynamically change an img src based on dropdown selected value
我想在用戶選擇圖像后動態顯示圖像。 不同的選項是從 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="">
您也可以使用 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="">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.