jqueryの：クローンがドロップダウン選択した項目

Question

後、私はオプションは、例えば、クローン（）関数から生成されたドロップダウンがあります。

<select id="drop1"> 
     <option value="0">Select...</option> 
     <option value="Apples">Apples</option> 
     <option value="Bananas">Bananas</option> 
     <option value="Orange">Orange</option> 
     <option value="Cats">Cats</option> 
     <option value="Dogs">Dogs</option> 
     <option value="Candy">Candy</option> 
    </select> 

    <select id="drop2">    
    </select> 

     ... 
<script> 
    $('#drop1').children().clone().appendTo('#drop2'); 
</script> 

をしかし、私が知りたいことはドロップダウンが選択された後のアイテムのクローンを作成する方法です項目。明らかにイベントでのonchange（）は、例えば、最初のドロップダウンを表示：

<select id="drop1"> 
     <option value="0">Select...</option> 
     <option value="Apples">Apples</option> 
     <option value="Bananas">Bananas</option> 
     <option value="Orange">Orange</option> 
     <option value="Cats" selected>Cats</option> --> select item 
     <option value="Dogs">Dogs</option> 
     <option value="Candy">Candy</option> 
    </select> 

クローン結果：

​​

私の意図は、範囲の2つのフィールド（静的データ）を生成することです。私が助けてくれることを願う。

Answer 1

fiddleのONCHANGE。

$('#drop1').change(function() { 
    $('#drop2').empty(); 
    $("#drop1 option:selected").nextAll().clone().appendTo('#drop2'); 
}); 

Answer 2

子供に.sliceを使用してみてください、

$('#drop1') 
    .children() 
    .slice($('#drop1')[0].selectedIndex + 1) 
    .clone() 
    .appendTo('#drop2'); 

DEMO

編集：#drop1

$('#drop1').change(function() { 
    $('#drop2') 
     .empty() 
     .append(
       $(this).children().slice(this.selectedIndex + 1) 
      .clone() 
     ); 
}); 

DEMO