选择下拉菜单选项后显示图片

Display picture after dropdown menu option is selected

本文关键字：显示图 选项 下拉菜单 选择      更新时间：2023-09-26

我想在下拉菜单中选择一个选项后显示一张图片。图片将取决于用户选择的值。我试过这样做（记住，我甚至还没有学会JavaScript，多亏了谷歌，我只知道两三个基本功能）：

showpic.js

document.getElementById('item').onchange = function(){
    document.getElementById('ipic').style.display = "block";
    document.getElementById('ipic').innerHTML = "<img src='http://example.com/pics/" + this.value + "'.png";
};

items.php不包含php代码以方便您

<div id='ia'>
<form action='add_items.php' method='post'>
Username: <input name='username' type='username'> <br />
Password: <input name='password' type='password'> <br />
Item:     <select name='item' id='item'>
              <option value='100'>Example</option>
              <option value='200'>Example 2</option>
          </select>
<script src='sort.js'></script> <br/> <!-- Sorts Items in Alphabetical Order -->
<div id='ipic'></div>
<script src='showpic.js'></script>
<input name='add' type='submit' value='Add Item'>
</form>
</div>

但这并没有奏效。我听说这与"XMLHTTPREQUEST"有关；异步传输有人能帮我吗？我不懂JavaScript。

我不确定你认为你需要AJAX做什么，但你的脚本几乎可以工作！

"<img src='http://example.com/pics/" + this.value + "'.png";

此部分已损坏，因为您启动了<img元素，但从未关闭它（/>）。

更改为：

document.getElementById('ipic').innerHTML = "<img src='http://example.com/pics/" + this.value + "'.png' />";

现在，它将尝试在div 中加载一个名为[value].png的图片

相关文章：