Javascript 带有子菜单的HTML5音频播放器

我有以下脚本来播放从菜单1中的选择到菜单2中的选择的音频文件序列。这是一个数字列表，另一个是字母列表：

我需要做的是在播放文件之前添加两个其他选择菜单，这样可以从任何菜单（即使是同一个菜单）或其他菜单中进行选择，如下所示：

因此，第一个“选择”旁边的菜单我可以选择数字或字母，当选择其中一个时，旁边的子类别菜单将更改，以显示从0到5的选择（如果选择了数字），或从A到C的选择（如果选择了字母）

第二个相连的两个菜单也应使用相同的菜单，它们与上述相同

我有两个脚本，但我不知道如何合并它们以反映所需内容。这里是JSFIDLE中的两个脚本，以及这里的主from/to脚本的副本：

1-从/到：

2-连接的菜单：

HTML:

JS:

<label for="from">From:</label>
<select id="from">
  <option value="">- Numbers -</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<label for="to">&nbsp;&nbsp;&nbsp;&nbsp;To:</label>
<select id="to">
  <option value="">- Letters -</option>
  <option value="6">A</option>
  <option value="7">B</option>
  <option value="8">C</option>
</select>

<br/><br/>
 
<audio id="player" controls="controls">
  <source id="mp3_src" src="https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/0.mp3" type="audio/mp3" />
</audio>

$(document).ready(function() {

    var audioUrls = [
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/0.mp3",
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/1.mp3",
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/2.mp3",
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/3.mp3",
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/4.mp3",
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/5.mp3",
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/6.mp3",
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/7.mp3",
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/8.mp3",
  ]

  $('select').on('change', function() {
    var from = $("#from").val();
    var to = $("#to").val();
    if (!from || !to) return;
    var audio = $("#player");
    audio[0].pause();
    $("#mp3_src").attr("src", audioUrls[from]);    
    audio.data("currentidx", from);
    console.log(from)
    audio[0].load();
    audio[0].play();
  });
  
  $("#player").on("ended", function() {
    var from = $("#from").val();
    var to = $("#to").val();
    if (!from || !to) return;
    var audio = $("#player");
    var src = $("#mp3_src").attr("src", audioUrls[from]);    
    var currentIdx = audio.data("currentidx") || 1;
    currentIdx++;
    console.log(currentIdx)
    var to = $("#to").val() || 8;
    if(currentIdx <= to){
        $("#mp3_src").attr("src", audioUrls[currentIdx]);
      audio.data("currentidx", currentIdx)
      audio[0].load();
        audio[0].play();
    }
  })

});