构建一个选择下拉列表,将所选结果显示在跨度中的一侧,并在前面加上“结果”(类似于表单输入中的标签)。
选择下方还有一个“添加另一个”按钮,单击该按钮时,会添加另一个“结果”div,并允许用户从同一个下拉列表中选择并显示新结果(已解决)。
Additionally, when the custom option is selected a div with two inputs (height and width) will appear (SOLVED).
我无法克隆一个元素并在它不相乘的情况下附加它(已解决)。
Also when the custom option is selected I am trying to get the div with the height and width to show, not sure why it isn't working (SOLVED).
有没有办法在从添加另一个按钮创建的新结果范围中显示结果?我一直遇到一个错误,其中选择更新所有结果或仅更新第一个结果。
到目前为止,我有这个:
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>
查询
$(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)
}