时间戳

首页 > 解决方案 > 如何根据下拉菜单中的选择显示图像？

javascript - 如何根据下拉菜单中的选择显示图像？

问题描述

我希望我的网站由于选择仅包含文本的选项值而发布图像。例如：

<select name="facebook" id="facebook">
  <option value="Facebook"> Facebook </option>
</select>
<button type="submit" name="submit"> Submit </button>

上面的选择标签显示了一个值为“Facebook”的选项。当您选择此选项并单击提交时，我希望网站根据所选的选项值发布 Facebook 徽标的图像（从文件夹或图像 URL 中检索）。

此外，我将值插入表中table_1，并从表中选择值以在网站上回显它们。这是检索值并将它们作为文本发布的想法，但正如我所说，我想检索信息但发布图像。

标签： javascripthtmljquery

解决方案

img在您的按钮旁边添加一个没有源 ( src="") 的元素，然后使用 jQuery 修改它.attr()。要查找从下拉列表 ( #select) 中选择的选项，请使用:selected选择器并获取它的值 ( val())。

$(document).on('click', '#submit', function() {
  $('#logo').attr('src', '//via.placeholder.com/150?text=' + $('#select').find(':selected').val()); // replace this with whatever you want
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="logoSelect" id="select">
  <option value="facebook"> Facebook </option>
  <option value="twitter"> Twitter </option>
  <option value="google"> Google </option>
  <option value="instagram"> Instagram </option>
</select>
<button id="submit" type="submit" name="submit"> Submit </button>
<br/><br/>
<img id="logo" src=""></img>

您还可以通过使用纯 JavaScript 和onclick和.selectIndex方法来实现这一点：

const logoImgElem = document.getElementById('logo');
const selectElem = document.getElementById('select');
document.getElementById('submit').onclick = function() {
  logoImgElem.src = '//via.placeholder.com/150?text=' + select.options[select.selectedIndex].text;
};
<select name="logoSelect" id="select">
  <option value="facebook"> Facebook </option>
  <option value="twitter"> Twitter </option>
  <option value="google"> Google </option>
  <option value="instagram"> Instagram </option>
</select>
<button id="submit" type="submit" name="submit"> Submit </button>
<br/><br/>
<img id="logo" src=""></img>

推荐阅读