javascript - 显示选择下拉列表的结果，然后克隆并添加另一个选择

Question

因此，我构建了两个选择下拉菜单，用户可以在其中进行选择，并且值会显示在上方。用户还可以“添加”另一个下拉列表并从相同的选项中再次选择。

在克隆 div 以及获取要显示的值时遇到问题。它似乎多次克隆 div。

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

Answer 1

这里正在工作 FIDDLE添加元素和显示选择更改

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

}