Question

I have a dropdown where the options are generated from the clone () function, for example:

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

But what I want to know is how to clone items after dropdown selected item. Obviously in the event onchange() , for example, viewing the first dropdown:

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

Clone result:

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

My intention is to generate 2 fields of range (static data). I hope I can help.

Answer 1

fiddle.

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

​