从下拉菜单加载图像，然后在用户基于所选图像单击时播放声音

Question

我正在尝试为特殊需要的学生创建一种交流解决方案。目的是能够从下拉菜单中选择两个图像，然后加载图像，以便孩子可以传达他们的选择。我的目标是当孩子点击图片时，它会说出他们选择的内容或将选择的图片加载到新页面上，以便支持他们的人知道他们选择的内容

我设法找到了如何从下拉菜单中加载图像，但是我无法确定如何将声音或页面链接与所选图像相关联

    <img id="imageToSwap" src="blank.jpg" />

    <br/><br/>

    <select id="dlist" onChange="swapImage()">
    <option value="blank.jpg"> </option>
    <option value="crisps.jpg">Crisps</option>
    <option value="ricecake.jpg">Rice Cake</option>
    <option value="blueroll.jpg">Blue Roll</option>
    <option value="banana.jpg">Banana</option>
    <option value="orange.jpg">Orange</option>
    <option value="sandwich.jpg">Sandwich</option>
    <option value="chips.jpg">Chips</option>
    <option value="breadstick.jpg">Breadstick</option>
    <option value="drink.jpg">Drink</option>
    <option value="wotsits.jpg">Wotsits</option>
    </select>

    <script type="text/javascript">
    function swapImage(){
	    var image = document.getElementById("imageToSwap");
	    var dropd = document.getElementById("dlist");
	    image.src = dropd.value;	


    };
    </script>
    </td>
    <td>
    <br/>
    <img src="blank.jpg">
    </td>
    <td>

    <img id="imageToSwap1" src="blank.jpg">

    <br/><br/>

    <select id="dlist1" onChange="swap()">
    <option value="blank.jpg"> </option>
    <option value="crisps.jpg">Crisps</option>
    <option value="ricecake.jpg">Rice Cake</option>
    <option value="blueroll.jpg">Blue Roll</option>
    <option value="banana.jpg">Banana</option>
    <option value="orange.jpg">Orange</option>
    <option value="sandwich.jpg">Sandwich</option>
    <option value="chips.jpg">Chips</option>
    <option value="breadstick.jpg">Breadstick</option>
    <option value="drink.jpg">Drink</option>
    <option value="wotsits.jpg">Wotsits</option>
    </select>

    <script type="text/javascript">
    function swap(){
	    var image = document.getElementById("imageToSwap1");
	    var dropd = document.getElementById("dlist1");
	    image.src = dropd.value;	
    };
    </script>

任何与单击或链接到新页面时播放的声音文件相关联的帮助都很好

Answer 1

用这个替换您的swapImage()函数。

function swapImage() {
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("dlist");
    image.src = dropd.value;    

    // Play sound, simple click sound
    var url = 'https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-18146/zapsplat_multimedia_click_001_19367.mp3';
    var a = new Audio(url);
    a.play();
};