您好我有以下下拉列表的方案
每当我选择cat1选项时,将填充子cat 1选项。但如果我添加另一个类别 它应该只添加cat1选项而不是sub cat选项。但在我的情况下,cat 1和sub cat选项都被加载。以下是我克隆下拉列表的代码。
<div class="new-categories">
<div class="new-category">
<select class="category-select" name="categories">
<option></option>
<option value="1">cat 1</option>
</select>
<select class='category-select-sub' style="display:none">
<!-- loaded from ajax -->
</select>
</div></div>
<a href="#" class="add-another-cat smallest" style="">Add another category</a>
$('.add-another-cat').click(function(event){
event.preventDefault();
var $orDiv = $('.new-category:last').after($('.new-category:first').clone());
});
这就是我实际上应该看起来像
的样子
感谢。
更新:填充ajax结果
$('div.new-categories').on('change', 'select.category-select', function () {
var $newselect = $('<select />').addClass('category-select-sub');
$(this).parent().append($newselect);
var cat_id = $(this).val();
$.ajax({
url:baseUrl+'categories/getsubcat',
data:{'id':cat_id},
dataType:'json',
async:false,
type:'POST',
success:function(data){
var subhtml = data;
$('.category-select-sub').show();
$('.category-select-sub').html(subhtml);
}
});
});
添加新猫列表并选择一个选项后,第一个子猫将根据新列表进行更改。如何防止这种情况?
答案 0 :(得分:1)
<script src="//code.jquery.com/jquery-latest.js"></script>
<div id="clone" class="new-category" style="display:none;">
<select class="category-select" name="categories">
<option></option>
<option value="1">cat 1</option>
</select>
<select class='category-select-sub' style="display:none">
<!-- loaded from ajax -->
</select>
</div>
<div class="new-categories">
</div>
<a href="#" class="add-another-cat smallest" style="">Add another category</a>
<script>
$('.add-another-cat').click(function(event){
event.preventDefault();
var $orDiv = $('.new-category:last').after($('#clone').clone().removeAttr('id').show());
});
$('.new-categories').html($('#clone').clone().removeAttr('id').show());
</script>
答案 1 :(得分:1)
您的代码对我没有意义,但这是我认为您正在尝试做的事情。如果我错了,请纠正我。
“我想克隆div new-category
并将其附加到div new-categories
。我只希望克隆第一个选择列表,而不是其他任何内容。
$('a.add-another-cat').click(function(e) {
e.preventDefault();
//clone the first div
var $newdiv = $('div.new-category:first').clone();
//remove the second select (if there is one)
$newdiv.children('select.category-select-sub').remove();
//append new div
$('div.new-categories').append($newdiv);
});
答案 2 :(得分:0)
我想看看你如何拥有第二个子选择菜单,因为它可能会影响解决方案。
问题出在你的HTML结构中
<div class="new-category">
<select class="category-select"> ... </select>
<select> ... </select>
</div>
克隆.new-categories
时,克隆两个选择元素。
您需要重新构建HTML,以便只克隆所需内容。
在没有克隆的情况下,您将需要自己创建一些东西。
例如,像这样:
$('.new-category:last').after( $("<div/>")
.addClass("new-category").append($('.category-select:last').clone()).append($("<select/>").addClass(".category-select-sub").hide());
a jsfiddle that shows how to empty a select
这很简单,您的代码明确引用所有子选择。看到你的代码说
$('.category-select-sub').show().html(subhtml);
此代码表示 - 将此HTML设置为所有“.category-select-sub”元素。但是你只想要这个类的特定元素 - 不是全部......
你应该只参考你创建的子选择 - 这很容易,因为你已经有了它的参考 - 所以成功函数应该是这样的:
$newselect.show().html(subhtml);