时间戳

首页 > 解决方案 > 嗨，我想创建一个表单，当有人选择一个选项时它会显示产品图片

javascript - 嗨，我想创建一个表单，当有人选择一个选项时它会显示产品图片

问题描述

我正在努力解决我想创建一个表单并显示客户选择的产品图像的问题。我无法让它工作，所以这就是我在这里问的原因。

目前我有以下代码：

<select onchange="yesnoCheck(this);">
<option value=“luxebonbon5”&gt;Luxe bonbons 5 stuks</option>
<option value=“luxebonbon10”&gt;Luxe bonbons 10 stuks</option>
<option value=“luxebonbon15”&gt;Luxe bonbons 15 stuks</option>
<option value=“bonbonmetlogo6”&gt;Bonbons met logo 6 stuks</option>
<option value=“bonbonmetlogo12”&gt;Bonbons met logo 12 stuks</option>
<option value=“bonbonmetlogo18”&gt;Bonbons met logo 18 stuks</option>
<option value=“klassiekbonbon16”&gt;Klassieke bonbons 16 stuks</option>
<option value=“klassiekbonbon23”&gt;Klassieke bonbons 23 stuks</option>
<option value=“paasei15”&gt;Luxe chocolade paasei 15cm</option>
<option value=“paasei20”&gt;Luxe chocolade paasei 20cm</option>
<option value=“paashaas50”&gt;XL chocolade paashaas 50cm</option>
<option value=“paascadeau”&gt;Paas cadeau pakket</option>
<option value=“chocoletter”Chocoladeletter (standaard)</option>
<option value=“chocolettersmarties”&gt;Chocoladeletter (smarties)</option>
<option value=“chocoletterhazelnoot”&gt;Chocoladeletter (hazelnoot)</option>
<option value=“chocoletterkaramel”&gt;Chocoladeletter (karamel zeezout)</option>
<option value=“chocoletterkoffie”&gt;Chocoladeletter (koffiebonen)</option>
<option value=“chocoletterruby”&gt;Ruby Chocoladeletter</option>
<option value=“chocopepernoot”&gt;Chocolade pepernoten</option>


<div id="ifYes" style="display: none;">
<label for="car">Dit product?</label> <input type="text" id="car" name="car" /><img src=“(image)”&gt;<br />


<script>
function yesnoCheck(that) {
    if (that.value = “luxebonbon5”) {
        alert("check");
        document.getElementById("ifYes").style.display = "block";
    } else {
        document.getElementById("ifYes").style.display = "none";
    }
}
</script>

标签： javascripthtml

解决方案

我可以看到您的代码有两个问题：

1) if (that.value = “luxebonbon5”): 要在 JS 中比较两个字符串，请使用==，而不是=!

2）您不需要that在处理程序中传递参数。在您的事件处理程序中，this将始终引用触发事件的元素，在本例中为select元素。

现在，您的问题的一个可能解决方案是最初有一个div，并在用户选择一个选项时img播放其属性。src

假设每个选项value都等于相应图像的名称（只是为了在这里更简单）：

function yesnoCheck() {
    var image = document.getElementById("your_image_id");
    image.src = this.value;
}

推荐阅读