CODEWITHSUNDEEP
javascriptjqueryhtmlcssclone
user2501654
user2501654

Reputation: 29

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

Having trouble cloning the div as well as getting the value to display. It seems to be cloning the div multiple times.

HTML:

    <div id="exp-display-choice">
    <div class="exp-choices">
        <ul class="choices">
            <!-- display selctions here -->
            <p>Results:</p> 
        </ul>
        <ul class="ad-choices">
            <li>
                <select class="select" id="ad-type">
                    <option value="" selected>Choose Your Pet</option>
                    <option value="Cat">Cat</option>
                    <option value="Dog">Dog</option>    
                    <option value="Wookie">Wookie</option>  
                </select>
            </li>
            <li>
                <select class="ad-size select full-width" id="ad-size">
                    <option value="" selected>Choose Transportation</option>
                    <option value="Planes">Planes</option>
                    <option value="Trains">Trains</option>
                    <option value="Automobiles">Automobiles</option>                            
                </select>
            </li>
        </ul>
    </div><!-- end of exp-choices -->
</div><!-- end of exp-display-choices -->

<a href="javascript:void(0);" class="add-btn button">Add</a>

JS:

function displayAds(current_select) 
{
var adChoice = current_select.val();
current_select.parents('.exp-choices').find('choices').append('<li>'+adChoice+'</li>');
}

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

$(".add-btn").click(function() 
{   

// grab the last exp-choices in exp-display-choice, clone it, then append to the bottom
var $newExpChoices = $(".exp-choices").parent().children(':last').clone().appendTo($(this).parent().parent());

$newExpChoices.show().insertAfter('.exp-choices');
});

jsfiddle

Upvotes: 0

Views: 1873

Answers (3)

Alex Art.
Alex Art.

Reputation: 8781

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

 <div id="exp-display-choice">
        <div class="exp-choices">
            <ul class="choices">
                <p>Results:<span class="pet_select"></span>  <span class="transportation_select"></span></p>
            </ul>
            <ul class="ad-choices">
                <li>
                    <select class="select" name="pet_select">
                        <option value="" selected>Choose Your Pet</option>
                        <option value="Cat">Cat</option>
                        <option value="Dog">Dog</option>    
                        <option value="Wookie">Wookie</option>  
                    </select>
                </li>
                <li>
                    <select class="ad-size select full-width" name="transportation_select">
                        <option value="" selected>Choose Transportation</option>
                        <option value="Planes">Planes</option>
                        <option value="Trains">Trains</option>
                        <option value="Automobiles">Automobiles</option>                            
                    </select>
                </li>
            </ul>
        </div><!-- end of exp-choices -->
    </div><!-- end of exp-display-choices -->

    <a href="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));
    });
});

function displayAds($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)

}

Upvotes: 1

aelor
aelor

Reputation: 11116

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.

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

Cheers !

Upvotes: 0

Kiran
Kiran

Reputation: 20313

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

Upvotes: 1

Related Questions