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

Question

我希望我的网站发布图像作为仅包含文本的选择选项值的结果。例如：

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

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

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

Answer 1

在您的按钮旁边添加一个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>