CODEWITHSUNDEEP
jquerydrop-down-menuclone
csotelo
csotelo

Reputation: 1475

jquery: clone after dropdown selected item

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.

Upvotes: 0

Views: 2383

Answers (2)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Try using .slice on children,

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

DEMO

Edit: Onchange of #drop1

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

DEMO

Upvotes: 0

Andy Gaskell
Andy Gaskell

Reputation: 31761

fiddle.

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

​

Upvotes: 3

Related Questions