Поэтому я создаю два раскрывающихся списка выбора, где пользователь выбирает, и значение отображается выше. Пользователь также имеет возможность "Добавить" другой 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');
});
Здесь работает 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)
}
Вы используете insetAfter(), который будет вставлять каждый элемент в набор согласованных элементов после цели. т.е. в вашем случае вы вставляете один и тот же клонированный элемент в элементы DOM с помощью классов .exp-choices
.
Пытаться:
var $newExpChoices = $(".exp-choices").parent().children(':last').clone();
$newExpChoices.show().appendTo($(".exp-choices").parent());
В вашем случае вы можете просто использовать 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>
Приветствия!