Display Results From Select Dropdown Then Clone And Add Another Select

So I'm building two select dropdowns where the user selects and the value is displayed above. The user also has the ability to 'Add' another dordown and select again from the same

Solution 1:

Here is working FIDDLE with both elements addition and displayed selection changes

<divid="exp-display-choice"><divclass="exp-choices"><ulclass="choices"><p>Results:<spanclass="pet_select"></span><spanclass="transportation_select"></span></p></ul><ulclass="ad-choices"><li><selectclass="select"name="pet_select"><optionvalue=""selected>Choose Your Pet</option><optionvalue="Cat">Cat</option><optionvalue="Dog">Dog</option><optionvalue="Wookie">Wookie</option></select></li><li><selectclass="ad-size select full-width"name="transportation_select"><optionvalue=""selected>Choose Transportation</option><optionvalue="Planes">Planes</option><optionvalue="Trains">Trains</option><optionvalue="Automobiles">Automobiles</option></select></li></ul></div><!-- end of exp-choices --></div><!-- end of exp-display-choices --><ahref="javascript:void(0);"class="add-btn button">Add</a>

JavaScript:

$(document).ready(function(){        

    // Add button will clone the Ad Type/Size selection
    $(".add-btn").click(function() 
    {   
        var $newExpChoices = $('.exp-choices').last().clone().appendTo($('#exp-display-choice'));
        $newExpChoices.find('.pet_select').text('');
        $newExpChoices.find('.transportation_select').text('');
        $('.exp-choices').on('change', "select", function(){
            displayAds($(this));
        });
    });


    $('.exp-choices').on('change', "select", function(){
        displayAds($(this));
    });
});

functiondisplayAds($current_select) 
{
    var adChoice = $current_select.val();
    //alert(adChoice);//alert($current_select.attr("name"));
    $current_select.closest('.exp-choices').find('.' + $current_select.attr("name")).text(adChoice)

}

Solution 2:

You are using insetAfter() which will insert every element in the set of matched elements after the target. i.e., in your case you are inserting same cloned element to DOM elements with class .exp-choices.

Try:

var$newExpChoices = $(".exp-choices").parent().children(':last').clone();
$newExpChoices.show().appendTo($(".exp-choices").parent());

DEMO FIDDLE

Solution 3:

In your case you can simply use jquery like this:

$("#butttton").on('click',function() {
  $('#tests').clone().appendTo('#rests');
});

here is the fiddle for your reference : http://jsfiddle.net/EmX7E/4/

just one div has been added to the original html.

<divid="exp-display-choice"><divid="rests"></div><divid="exp-display-choice"><divid="rests"></div><divclass="exp-choices"id = "tests"><ulclass="choices"><p>Results:</p></ul><ulclass="ad-choices"><li><selectclass="select"id="ad-type"><optionvalue=""selected>Choose Your Pet</option><optionvalue="Cat">Cat</option><optionvalue="Dog">Dog</option><optionvalue="Wookie">Wookie</option></select></li><li><selectclass="ad-size select full-width"id="ad-size"><optionvalue=""selected>Choose Transportation</option><optionvalue="Planes">Planes</option><optionvalue="Trains">Trains</option><optionvalue="Automobiles">Automobiles</option></select></li></ul></div><!-- end of exp-choices --></div><!-- end of exp-display-choices --><buttonid="butttton">click me</button>

Cheers !