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

fiddle

$('#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

jquery：下拉选择项后克隆

2 个答案: