Javascript 显示“选择”下拉列表中的结果，然后克隆并添加另一个“选择”

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

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

HTML:

结果：




选择你的宠物
猫
狗
伍基


选择交通工具
飞机
火车
汽车

JS:

功能显示广告（当前选择）
{
var adChoice=current_select.val（）；
当前_select.parents（'.exp choices'）。查找（'choices'）。追加（'
'+adChoice+'
'）；
}
$（'.exp choices'）。on（'change'，'option:selected'，function（）
{
显示广告（$（本））；
});
$（“.add btn”）。单击（函数（）
{   
//抓取exp display choice中的最后一个exp选项，克隆它，然后附加到底部
var$newExpChoices=$（“.exp choices”）.parent（）.children（':last'）.clone（）.appendTo（$（this.parent（）.parent（））；
$newExpChoices.show（）.insertAfter（“.exp choices”）；
});

您正在使用的将在目标之后插入匹配元素集中的每个元素。i、 例如，在您的例子中，使用class

.exp choices

将相同的克隆元素插入到DOM元素中

尝试：

---

在您的情况下，您可以像这样简单地使用jquery：

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

这把小提琴供你参考：

只向原始html添加了一个div

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

结果:




选择你的宠物
猫
狗
伍基


选择交通工具
飞机
火车
汽车


点击我

干杯

这里同时处理元素添加和显示的选择更改

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

---

这很有效。为了更好地理解，您所做的是在当前选定的上下文中运行displayAds（）函数，因此使用（$this）？此外，我很好奇这一行到底在做什么：$current_select.closest（'.exp choices'）.find（'.+$current_select.attr（“name”）.text（adChoice）。我搞不清楚当前选择的是什么。函数displayAds保留一个名为$current\u select的参数-这是触发更改事件的元素之一。您还可以看到，我添加到selects“name”属性中，因此$current_select.attr（“name”）返回该属性值。Finaly$current_-select.closest（'.exp-choices'）-返回比'.find（'.+$current_-select.attr（“name”））具有class=name属性的最接近父级-这将最终返回一个跨度：@AlexArt。如果以下答案之一解决了您的问题。

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

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

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

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

}