Search code examples
javascriptjqueryhtmlclone

Dropdown Boxes cloned with JQuery don't retain the behaviour of the original

What I am trying to do is clone 3 drop-down boxes and add them beneath the original set.

At the moment it works but the clones do not maintain the functionaility of the original set.

What the originals do is check the selected value of the first drop-down box in order to populate the drop-down lists for the other two.

Fiddle is below but adding the clones doesn't seem to work for some reason I can't figure out, it works on the page I am working on.

http://jsfiddle.net/pV6x5/6/

Thanks,

Martin

UPDATE

updated the fiddle, it was missing the advancedsearch div: http://jsfiddle.net/pV6x5/7/

Solution

  • Use jQuery live to keep the event's bound to the new elements. With live it binds the event to all present and future elements where just defining a handler for change will only bind for the current elements (you can also just reattach the events every time you create an element but why do it when live takes care of it for you)

    $tags.live("change",function(){ /* your stuff here */});

    UPDATE Here is the change function and if block:

    $(document).ready(function() 
{
$tags = $("select[name='tags']");

$tags.live("change",function()
{
    $operands = $(this).parent().find("select[name='operands']");
    $values = $(this).parent().find("select[name='values']");
if ($(this).val() == "agent") 
{

$(this).parent().find("select[name='operands'] option").remove();

$("<option>=</option>").appendTo($operands);
$("<option>!=</option>").appendTo($operands);

$(this).parent().find("select[name='values'] option").remove();
$("<option>excel</option>").appendTo($values);
$("<option>msword</option>").appendTo($values);
$("<option>ppt</option>").appendTo($values);
$("<option>pdf</option>").appendTo($values);
$("<option>image</option>").appendTo($values);
$("<option>txt</option>").appendTo($values);
$("<option>html</option>").appendTo($values);
$("<option>csv</option>").appendTo($values);
$("<option>ooxml</option>").appendTo($values);
$("<option>flash</option>").appendTo($values);
$("<option>wmf</option>").appendTo($values);
}