Показать результаты из выпадающего списка, затем клонировать и добавить еще один выбор

0

Поэтому я создаю два раскрывающихся списка выбора, где пользователь выбирает, и значение отображается выше. Пользователь также имеет возможность "Добавить" другой dordown и снова выбрать из тех же параметров.

У вас возникли проблемы с клонированием 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

Теги:
clone

3 ответа

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)

}
  • 0
    Это прекрасно работает. Просто чтобы лучше понять, что вы сделали, запустили функцию displayAds () в контексте текущего выбранного, следовательно ($ this) используется?
  • 0
    Кроме того, мне интересно, что делает эта строка: $ current_select.closest ('. Exp-choices') . Find ('.' + $ Current_select.attr ("name")). Text (adChoice) . Я не совсем понимаю, что такое current_select. Это нигде не определено.
Показать ещё 3 комментария
1

Вы используете insetAfter(), который будет вставлять каждый элемент в набор согласованных элементов после цели. т.е. в вашем случае вы вставляете один и тот же клонированный элемент в элементы DOM с помощью классов .exp-choices.

Пытаться:

var $newExpChoices = $(".exp-choices").parent().children(':last').clone();
$newExpChoices.show().appendTo($(".exp-choices").parent());

DEMO FIDDLE

0

В вашем случае вы можете просто использовать jquery следующим образом:

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

вот скрипка для вашей справки: http://jsfiddle.net/EmX7E/4/

только один div добавлен в исходный 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>

Приветствия!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню