如何根据下拉选项的不同值展示对应饮品图片？

1. 修正原代码核心问题 #

原JS里的jQuery选择器缺少#（id选择器必须加#才能正确定位元素），且仅拼接了文件名但未实际更新图片展示，同时缺少函数触发时机。

2. 补充HTML结构 #

添加图片展示容器，并给下拉框绑定触发事件，确保用户选择选项时自动更新图片：

<body>
    <form>
        <select id="alcohol" onchange="displayDrink()">
            <option value="A">Select Alcohol</option>
            <option value="B">Vodka</option>
            <option value="C">Whiskey</option>
            <option value="D">Rum</option>
            <option value="E">Tequila</option>
            <option value="F">Gin</option>
            <option value="G">Bourbon</option>
            <option value="H">Scotch</option>
            <option value="I">Vermouth</option>
            <option value="J">Spirits</option>
            <option value="K">Cognac</option>
        </select>
        <select id="flavor" onchange="displayDrink()">
            <option value="0">Select Flavor</option>
            <option value="1">Sweet</option>
            <option value="2">Sour</option>
            <option value="3">Savory</option>
            <option value="4">Spicy</option>
            <option value="5">Smoky</option>
            <option value="6">Bitter</option>
            <option value="7">Fruity</option>
            <option value="8">Herbaceous</option>
        </select>
        <select id="type" onchange="displayDrink()">
            <option value="W">Select Type</option>
            <option value="X">Blended</option>
            <option value="Y">Iced</option>
            <option value="Z">Chilled</option>
        </select><br /><br />
        
        <!-- 新增图片展示区域 -->
        <div>
            <img id="drinkImage" src="" alt="Selected Drink" style="max-width: 300px; border-radius: 8px;" />
        </div>
    </form>
</body>

3. 完善JS逻辑 #

修正选择器，添加选项有效性验证，最终更新图片的src属性：

function displayDrink() {
    // 用id选择器获取下拉框值，必须加#
    const alcoholVal = $("#alcohol").val();
    const flavorVal = $("#flavor").val();
    const typeVal = $("#type").val();
    const drinkImg = $("#drinkImage");

    // 验证是否所有选项都选择了有效值（排除默认提示选项）
    if (alcoholVal === "A" || flavorVal === "0" || typeVal === "W") {
        drinkImg.attr("src", "").attr("alt", "Please select all options");
        return;
    }

    // 拼接图片文件名，假设图片存放在images子文件夹下，可根据实际路径调整
    const mixedDrink = `${alcoholVal}${flavorVal}${typeVal}.jpg`;
    const imgPath = `images/${mixedDrink}`;

    // 更新图片src，展示对应饮品图
    drinkImg.attr("src", imgPath).attr("alt", "Drink Preview");
}

4. 额外优化建议 #

• 路径调整：如果图片和HTML文件在同一目录，将images/${mixedDrink}改为${mixedDrink}即可。
• 错误处理：添加图片加载失败的兜底逻辑，给img标签加onerror事件：

  <img id="drinkImage" src="" alt="Selected Drink" style="max-width: 300px;" onerror="this.src='default.jpg'" />
  

• 原生JS替代：如果不想用jQuery，可替换为原生JS写法：

  const alcoholVal = document.getElementById("alcohol").value;
  const drinkImg = document.getElementById("drinkImage");
  drinkImg.src = imgPath;
  

内容的提问来源于stack exchange，提问作者A M