jquery - jquery：下拉所选项目后克隆

Question

我有一个下拉列表，其中选项是从 clone () 函数生成的，例如：

    <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>

克隆结果：

<select id="drop2">
    <option value="Dogs">Dogs</option>
    <option value="Candy">Candy</option>
</select>

我的意图是生成 2 个范围字段（静态数据）。我希望我能帮上忙。

Answer 1

小提琴。

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

​</p>

Answer 2

尝试对孩子使用 .slice，

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

演示

编辑： Onchange#drop1

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

演示