javascript - HTML中的基本Javascript函数

首先，我在Zend服务器上运行代码。
我想做的是有一个select下拉菜单，用户可以在其中选择不同的声音。当他们选择一个时，他们按下Quack按钮，然后播放他们选择的声音。我有代码的地方

document.getElementById("test").innerHTML = "Quacked";

我需要输入代码来播放音频，但是我不知道如何。此外，我无法弄清楚检索select下拉列表的当前值所需的代码。我在哪里

var x = document.getElementById("Quack").innerHTML;

我需要将Quack替换为所选选项的值。我怎么做？

<br>
Select:
<select id = "mySelect">
    <option value="Quack">Quack</option>
    <option value="Chirp"><Chirp</option>
</select>

Press:
<button type="button" onclick="quack()">Quack!~</button>

<p id = "test"></p>

<script>
    function quack(){
        var x = document.getElementById("Quack").innerHTML;
        if(x=="Quack"){
            document.getElementById("test").innerHTML = "Quacked";

        }
        if(x=="Chirp"){
                document.getElementById("test").innerHTML = "Chirped";
        }
    }
</script>
<br>

最佳答案

您可以像这样获得下拉列表的选定索引的值

var e = document.getElementById("Quack");
var x = e.options[e.selectedIndex].value;

然后，您可以像

document.getElementById('IDforYourAudioTag').play();   //HTML

<audio>标记看起来像这样

<audio id="IDforYourAudioTag" src="test.wav" preload="auto"></audio>

Good Read