2

I have a select box that gets cloned. I want to remove the user's previous selection from each cloned select box. Here is the method that does the 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;
}

This kinda works but doesn't remove the last selected:

 $('#product_categories > .category_block:last option:selected').remove();

Here is the 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>

tshepang
  • 12,111
  • 21
  • 91
  • 136
Slinky
  • 5,662
  • 14
  • 76
  • 130
  • My answer assumes that `.category_block` is a ` – user113716 May 21 '10 at 14:16
  • @patrick - So far, I have not been able to get this working properly but I will keep trying and I do appreciate all of the excellent examples and suggestions – Slinky May 21 '10 at 20:57
  • The HTML you provided was crucial. It should work now. Be aware of one **important** thing. The `select` in the `category_block` you're cloning has an ID of `cat_list`. The ID is being cloned too, which means you have 2 elements with the same ID (which is really bad). You either need to get rid of the ID, or modify it when you're cloning it. – user113716 May 21 '10 at 21:35

2 Answers2

3

You need to clone the proper element, set the selected value for the clone, then append the clone.

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;
}

UPDATE: Modified to fit HTML added to question.

Please note, the ID of the select element is being cloned, which means you have 2 elements with the same ID. This is not allowed. You'll need to get rid of the ID, or change it in the clone to some other value.

You could do something like this before you append the clone:

    // 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);
user113716
  • 318,772
  • 63
  • 451
  • 440
1

You can save the cloned element to a variable that you manipulate before you insert it in the DOM. or re-select the new cloned element after it has been inserted and do the manipulations

See Best way to unselect a <select> in jQuery? on how to de-selecting

Community
  • 1
  • 1
baloo
  • 7,635
  • 4
  • 27
  • 35