使用“添加另一个”按钮显示所选结果的下拉菜单

Question

构建一个选择下拉菜单，将所选结果显示在带有“结果”前缀的跨度中（类似于表单输入中的标签）。

选择下方还有一个“添加另一个”按钮，单击该按钮时，会添加另一个“结果”div，并允许用户从同一个下拉列表中选择并显示新结果（已解决）。

Additionally, when the custom option is selected a div with two inputs (height and width) will appear (SOLVED).

我无法克隆一个元素并在不相乘的情况下附加它（已解决）。

此外，选择自定义选项时，我试图将div与高度和宽度显示，不确定为什么不起作用（解决）。

有没有办法在通过“添加另一个”按钮创建的新结果范围中显示结果？我一直遇到一个错误，选择更新所有结果或只更新第一个结果。

到目前为止，我有这个：

FIDDLE

HTML

<div id="exp-display-choice">
    <div class="exp-choices">
        <ul class="choices">
            <p class="results">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 class="custom" value="Custom">Custom</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 another</a>        

<div style="display: none;">
    <p>Width:</p>
      <input type="text" name="name" id="name" class="input custom-input" maxlength="10">
    <p>Height:</p>
      <input type="text" name="name" id="name" class="input custom-input" maxlength="10">
</div>

JQUERY

$(document).ready(function(){   

    // Show Custom Ad Input fields
    $(".ad_size_select").change(function(){
    if ($(".ad_size_select").val() == "custom") 
    {
       //alert('test');
       // show custom-size fields
       $('.custom-size').show();

    } else {
       // hide the custom-size fields
       $('.custom-size').hide();
        }
    });

    // Add another results when button is clicked
    $(".add-btn").click(function() 
    {   
        var $newAddChoices = $('.results').last().clone().appendTo($($('.results')));
        $newAddChoices.find('.pet_select').text('');
        $newAddChoices.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();
    $current_select.closest('.exp-choices').find('.' + $current_select.attr("name")).text(adChoice)

}

Answer 1

问题出在这一行

// Add another results when button is clicked
$(".add-btn").click(function() 
{   
    // THIS line you clone last `.results` and append `into` `.results`
    // It should append to its `parent` instead.
    var $newAddChoices = $('.results').last().clone().appendTo($($('.results')));
    $newAddChoices.find('.pet_select').text('');
    $newAddChoices.find('.transportation_select').text('');
    $('.exp-choices').on('change', "select", function(){
        displayAds($(this));
    });
});

换成，看看FIDDLE :)

$(".add-btn").click(function() 
{   
    // You should append it to `parent` of `.results`
    var $newAddChoices = $('.results:last').clone().appendTo($('.results').parent());
    $newAddChoices.find('.pet_select').text('');
    $newAddChoices.find('.transportation_select').text('');
    $('.exp-choices').on('change', "select", function(){
        displayAds($(this));
    });
});