结合文本和选择（javascript）

我想使用一个选择框来选择一个模板，我需要它来提供不带文件扩展名（.png）的选择/值，但我需要在末尾添加扩展名，以便可以预览选择。这是我的代码，我只是不太懂javascript。感谢您的帮助

<select onchange="document.getElementById('preview').src = this.value">
        <option value="" selected="selected"></option>
        <option value="bottom.png">Flower 2</option>
        <option value="logo.png">Flower 3</option>
        <option value="top.png">Flower 4</option>
    </select>
<img alt="" width="155" height="138" id="preview" />

花2
花3
花4

---

我需要它将.png添加到预览中，而选项值中没有.png。

为什么需要.png？它不会在其他地方显示给用户，是吗

无论如何，要做到这一点，请从每个值中去掉“.png”，然后将onchange更改为

    document.getElementById('preview').src = this.value + '.png'

---

如果您正在寻找类似的产品：

<select onchange="document.getElementById('preview').src = this.value">
        <option value="" selected="selected"></option>
        <option value="bottom">Flower 2</option>
        <option value="logo">Flower 3</option>
        <option value="top">Flower 4</option>
    </select>
<img alt="" width="155" height="138" id="preview" />

对此，请改为：

<select onchange="document.getElementById('preview').src = this.value">

本质上，您是基于所选的

选项

值创建一个字符串，并在其末尾添加“.png”。我想这就是你要找的

但是，与您最初的做法相比，我仍然看不到这样做的好处。

更改：

这就是价值

致：

---

this.value+'.png'

用户在实际下拉菜单中看不到代码的选择。在预览中添加“.png而选项值中没有.png”有什么好处？这就是为什么我说从每个值中去掉“.png”。

<select onchange="document.getElementById('preview').src = this.value + '.png'">