Question

我正在研究一个项目，用户可以从网页的三个部分中选择选项。红酒，白葡萄酒和玫瑰。在这些部分中，他们可以从下拉菜单中进行选择，该下拉菜单提供不同口味的葡萄酒。

例如，红酒可以让您从三种口味中进行选择，白葡萄酒可以让您从其他三种口味中进行选择，等等。

我遇到的问题是，我最后做的任何部分都是唯一更改的部分。如果我要更改红色下的葡萄酒选择，则会更改玫瑰色部分。

HTML

<div class="vl3"></div>
<div class="vl4"></div>

<div class="redwine">Red Wine<br> </div>
    <div class="redwineselect">
          <form action="purchase.htm" method="post"><br>
            Select Your Red...<br><br>
            <img src="merlot.png" id="redSelect" height="400px"> <br>
            <select name="redList" onchange="displayImage(this);">
                <option value="merlot.png">Merlot</option>
                <option value="pinot_nior.png">Pinot Noir</option>
                <option value="cabernet_red.png">Cabernet</option>   
            </select>
        <input type="text" value="" placeholder="Quantity" required size="8"><br><br>
        <button type="submit" class="submit">Purchase</button>
`     </form>
    </div> 



<div class="whitewine">White Wine<br></div>
    <div class="whitewineselect"> 
        <form action="purchase.htm" method="post"><br>
            Select Your White...<br><br>
            <img src="pinot_grigio.png" id="whiteSelect" height="400px"><br>
                <select name="whiteList" onchange="displayImage(this);">
                    <option value="pinot_grigio.png">Pinot Grigio</option>
                    <option value="riesling.png">Reisling</option>
                    <option value="chardonnay.png">Chardonnay</option>
                </select>
            <input type="text" value="" placeholder="Quantity" required size="8"><br><br>
            <button type="submit" class="submit">Purchase</button>
        </form>
    </div>



<div class="rosewine">Rose Wine</div>
    <div class="rosewineselect">
        <form action="purchase.htm" method="post"><br>
            Select Your Rose...<br><br>
            <img src="grenache.png" id="roseSelect" height="400px"><br>
                <select name="roseList" onchange="displayImage(this);">
                    <option value="grenache.png">Grenache</option>
                    <option value="mourverde.png">Mourverde</option>
                    <option value="pinot_rose.png">Pinot Rose</option>
                </select>
            <input type="text" value="" placeholder="Quantity" requried size="8"><br><br>
            <button type="submit" class="submit">Purchase</button>
        </form>
     </div>

JavaScript

function displayImage(elem){var image=document.getElementById("redSelect");image.src=elem.value;
}

function displayImage(elem){var image=document.getElementById("whiteSelect");image.src=elem.value;
}

function displayImage(elem){var image=document.getElementById("roseSelect");image.src=elem.value;
}

Answer 1

您的三个函数具有相同的名称，因此它们相互覆盖。给他们每个人起一个不同的名字，它将起作用。

Answer 2

尝试使用不同的方法名称

<div class="vl3"></div>
<div class="vl4"></div>

<div class="redwine">Red Wine<br> </div>
    <div class="redwineselect">
          <form action="purchase.htm" method="post"><br>
            Select Your Red...<br><br>
            <img src="merlot.png" id="redSelect" height="400px"> <br>
            <select name="redList" onchange="displayRedImage(this);">
                <option value="merlot.png">Merlot</option>
                <option value="pinot_nior.png">Pinot Noir</option>
                <option value="cabernet_red.png">Cabernet</option>   
            </select>
        <input type="text" value="" placeholder="Quantity" required size="8"><br><br>
        <button type="submit" class="submit">Purchase</button>
`     </form>
    </div> 



<div class="whitewine">White Wine<br></div>
    <div class="whitewineselect"> 
        <form action="purchase.htm" method="post"><br>
            Select Your White...<br><br>
            <img src="pinot_grigio.png" id="whiteSelect" height="400px"><br>
                <select name="whiteList" onchange="displayWhiteImage(this);">
                    <option value="pinot_grigio.png">Pinot Grigio</option>
                    <option value="riesling.png">Reisling</option>
                    <option value="chardonnay.png">Chardonnay</option>
                </select>
            <input type="text" value="" placeholder="Quantity" required size="8"><br><br>
            <button type="submit" class="submit">Purchase</button>
        </form>
    </div>



<div class="rosewine">Rose Wine</div>
    <div class="rosewineselect">
        <form action="purchase.htm" method="post"><br>
            Select Your Rose...<br><br>
            <img src="grenache.png" id="roseSelect" height="400px"><br>
                <select name="roseList" onchange="displayRoseImage(this);">
                    <option value="grenache.png">Grenache</option>
                    <option value="mourverde.png">Mourverde</option>
                    <option value="pinot_rose.png">Pinot Rose</option>
                </select>
            <input type="text" value="" placeholder="Quantity" requried size="8"><br><br>
            <button type="submit" class="submit">Purchase</button>
        </form>
     </div>

function displayRedImage(elem){var image=document.getElementById("redSelect");image.src=elem.value;
}

function displayWhiteImage(elem){var image=document.getElementById("whiteSelect");image.src=elem.value;
}

function displayRoseImage(elem){var image=document.getElementById("roseSelect");image.src=elem.value;
}

创建多个选择列表，以根据您选择的内容显示图像

2 个答案: