嵌套下拉列表：取決於值

Question

我有兩個下拉列表與值。當我在第一個選擇一個值時，我想在第二個返回具有相同選定值的元素。第二個列表取決於第一個列表選擇。我怎麼能這樣做？

<div class="form-group"> 
    <label for="first">First list</label> 
     <select id="first" class="form-control" role="listbox" onchange="filterList();"> 
      <option value="Select level 1" selected="selected">Select...</option> 
      <option value="Option 1">Option 1</option> 
      <option value="Option 2">Option 2</option> 
     </select> 
</div> 
<div class="form-group"> 
    <label for="second">Second list</label> 
     <select id="second" class="form-control" role="listbox"> 
      <option value="Select level 2" data-group="Select" selected="selected">Select...</option> 
      <option value="Option 1 - 1" data-group="Option 1">First list 1 - Element 1</option> 
      <option value="Option 1 - 2" data-group="Option 1">First list 1 - Element 2</option> 
      <option value="Option 2 - 1" data-group="Option 2">First list 2 - Element 1</option> 
      <option value="Option 2 - 2" data-group="Option 2">First list 2 - Element 2</option> 
     </select> 
</div> 

jQuery腳本

function filterList(){ 

    var first = $("#first").find('option:selected').text(); // stores first list selected elements 

    $("#option-container").children().appendTo("#second"); // moves <option> contained in #option-container back to their <select> 

    var toMove = $("#second").children("[data-group!='"+first+"']"); // selects elements to move out 

    toMove.appendTo("#option-container"); // moves elements in #option-container 

    $("#second").removeAttr("disabled"); // enables select 
};