如何设置一个javascript函数以在多个html select元素上工作

如何解决如何设置一个javascript函数以在多个html select元素上工作

JavaScript 所以，我已经使用这个功能，这就是播放音频的用户，当选择

function initAudio(){
    var audio,dir,ext,mynoteslist;
    dir = "audio/";
    ext = ".mp3";
    // Audio Object
    audio = new Audio();
    audio.src = dir+"a3"+ext;
    audio.play();
    // Event Handling
    mynoteslist = document.getElementById("mynoteslist");
    mynoteslist.addEventListener("change",changeNote);
    // Functions
    function changeNote(event){
        audio.src = dir+event.target.value+ext;
        audio.play();
    }
}
window.addEventListener("load",initAudio);

HTML

  <body>
    <select class="mynoteslist" id=mynoteslist>
      <option value="A1">A1</option>
      <option value="B1">B1</option>
      <option value="C1">C1</option>
      <option value="D1">D1</option>
      <option value="E1">E1</option>
      <option value="F1">F1</option>
      <option value="G1">G1</option>
    </select>

    <select class="mynoteslist1" id=mynoteslist1>
      <option value="A1">A1</option>
      <option value="B1">B1</option>
      <option value="C1">C1</option>
      <option value="D1">D1</option>
      <option value="E1">E1</option>
      <option value="F1">F1</option>
      <option value="G1">G1</option>
    </select>


<script src="Tune.js" charset="utf-8"></script>
<script src="Notes.js" charset="utf-8"></script>

  </body>

无法将功能设置为可在多个选择元素上使用。我试图将代码更改为这样的

// Event Handling
    //mynoteslist = document.getElementById("mynoteslist");
    /mynoteslist.addEventListener("change",changeNote);

    var arr = document.getElementsByClassname("mynoteslist");
    for (var k=0; k<arr.length; k++){
       arr[k].addEventListener("change",changeNote);
}

不是真的为我工作。