选择标记的更改如何触发更改img的src?

时间:2018-10-10 06:49:52

标签: javascript html

是否可以将根据您选择的选项而变化的图像放在选择标记中?我需要更改select标记内与所选国家/地区匹配的国旗图像。

1 个答案:

答案 0 :(得分:1)

概念证明就是这样。

HTML

<select id="select" onchange="window.changeSrc(this);">
    <option value="https://www.funnyhoop.com/wp-content/uploads/2018/06/funny-animals-1-5.jpg">First</option>
    <option value="https://pbs.twimg.com/profile_images/821849411991044096/lQFa_Vly_400x400.jpg">Second</option>
</select>
<img src="" id="img"
</body>

Javascript

window.changeSrc = function(that) {
    document.getElementById("img").src = that.value;
}
window.changeSrc(document.getElementById('select'));

提琴:https://jsfiddle.net/2tsv3uLq/

说明

您需要一个select标签和一个img标签。 select标签的更改将更改src标签的img