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

回答1:

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)

}

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

回答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.

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

来源：https://stackoverflow.com/questions/18972846/display-results-from-select-dropdown-then-clone-and-add-another-select