jQuery: How to reset multiple dropdowns after they have been cloned?

At the moment my code clones 3 dropdowns everytime you click the add button.

I managed to get it to copy the row exactly because before, the first dropdown would reset by itself but the other two would not so I w开发者_运维百科as just wondering how to reset all 3 dropdowns?

It is easiest to see in this JSFiddle:

http://jsfiddle.net/jydqK/7/

So, if you change the first dropdown to agent and then click the + you will see the second row appears duplicated whereas I would like it to reset to tags, operands and values.

Any help greatly appreciated.

You can use removeAttr to remove selected attribute and then fire a change() event.

In your case:

dropdownclone.find('select.tags option:selected').removeAttr('selected');
dropdownclone.find('select.tags option:first').attr('selected','selected');
dropdownclone.find('select.tags').trigger('change');

Modified example: http://jsfiddle.net/ZF3mc/2/

If I understood your question, you want the duplicated row of selects to reset their values.

In this case you can just remove this:

dropdownclone.find('select').each(function(index, item) {
 //set new select to value of old select
$(item).val( $dropdownSelects.eq(index).val() );
});

and replace it with:

dropdownclone.find('option').attr('selected', false);

Find all dropdowns in your clone. For each dropdown, check every option tags for a selected attribute and remove it. Something like this:

clone.find('select').each(function() {
    $(this).find('option').each(function() {
        $(this).removeAttr('selected');
    });
});

Or better yet, find only the selected option tags using :selected filter before removing.