clone()操作中に選択した要素を削除する方法
質問
クローン化される選択ボックスがあります。クローン化された各選択ボックスからユーザーの以前の選択を削除したい。これが行う方法です clone()
:
function addselect(s){
$('#product_categories > .category_block:last').after(
$('#product_categories > .category_block:last').clone()
);
set_add_delete_links();
return false;
}
function set_add_delete_links(){
$('.remove_cat').show();
$('.add_cat').hide();
$('.add_cat:last').show();
$("#product_categories > .category_block:only-child > .remove_cat").hide();
}
function removeselect(s){
$(s).parent().remove();
set_add_delete_links();
return false;
}
これは機能しますが、最後に選択されたものを削除しません。
$('#product_categories > .category_block:last option:selected').remove();
これがHTMLです
<div id="product_categories">
<div class="category_block">
<select name="category_ids[]" id="cat_list">
<option value="">Select Attribute</option>
<option value="1770">Foo0</option>
<option value="1773">Foo1</option>
<option value="1775">Foo2</option>
<option value="1765">Foo3</option>
<option value="1802">Foo4</option>
<option value="1766">Foo5</option>
</select>
<input class="specsinput" type="text" name="specs[]" value="" />
<a href="#" onClick="return removeselect(this);" class="remove_cat"> [-] </a>
<a href="#" onClick="return addselect(this);" class="add_cat"> [+] </a>
</div>
解決
適切な要素をクローンし、クローンの選択した値を設定し、クローンを追加する必要があります。
function addselect(s){
// Store the block in a variable
var $block = $('#product_categories > .category_block:last');
// Grab the selected value
var theValue = $block.find(':selected').val();
// Clone the block
var $clone = $block.clone();
// Find the selected value in the clone, and remove
$clone.find('option[value=' + theValue + ']').remove();
// Append the clone
$block.after($clone);
set_add_delete_links(); return false;
}
アップデート: HTMLに適合するように修正された質問に追加されました。
選択した要素のIDがクローン化されていることに注意してください。つまり、同じIDを持つ2つの要素があることを意味します。これは許可されていません。 IDを取り除くか、クローンで他の値に変更する必要があります。
クローンを追加する前に、このようなことをすることができます。
// Grab the select in the clone
var $select = $clone.find('select');
// Update its ID by concatenating theValue to the current ID
$select.attr('id', $select.attr('id') + theValue);
他のヒント
クローン化された要素を、DOMに挿入する前に操作する変数に保存できます。または、新しいクローン化された要素が挿入された後に再選択して操作を行います
見る 選択解除する最良の方法au003Cselect> jquery?解選択方法について
所属していません StackOverflow