Аудио плеер HTML5 с подменю

Question

У меня есть следующий скрипт для воспроизведения последовательности аудиофайлов от выбора в меню 1 до выбора в меню 2. Он выглядит следующим образом (список чисел, другой для букв):

Что мне нужно сделать, это добавить два других меню выбора перед действием воспроизведения файлов, чтобы выбор мог быть из любого меню (даже одного и того же) или других меню.(чтобы выглядеть так):

Таким образом, в меню рядом с первым Select я могу выбрать numbers или letters, а при выборе одного из них sub-categories Меню рядом с ним изменяется, показывая либо выбор из 0-5 (если выбран numbers), либо из A-C (если выбран letters).

То же самое должно работать длявторые два соединенных меню (они такие же, как указано выше).

У меня есть оба сценария, но я не могу понять, как объединить их, чтобы отразить то, что нужно.Вот два сценария в Jsfiddle, а также копия основного сценария from / to здесь:

1- play (from / to): https://jsfiddle.net/d5g8w4cn/2/

2- связанные меню:http://jsfiddle.net/2pza5/

HTML:

<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="http://marvelhotelbangkok.com/audio/0.mp3" type="audio/mp3" />
</audio>

JS:

$(document).ready(function() {

    var audioUrls = [
    "http://marvelhotelbangkok.com/audio/0.mp3",
    "http://marvelhotelbangkok.com/audio/1.mp3",
    "http://marvelhotelbangkok.com/audio/2.mp3",
    "http://marvelhotelbangkok.com/audio/3.mp3",
    "http://marvelhotelbangkok.com/audio/4.mp3",
    "http://marvelhotelbangkok.com/audio/5.mp3",
    "http://marvelhotelbangkok.com/audio/A.mp3",
    "http://marvelhotelbangkok.com/audio/B.mp3",
    "http://marvelhotelbangkok.com/audio/C.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();
    }
  })

});