3

I have two comboboxes that I need to populate with the same information when another combobox data is changed.

However, when I use the .append() method, it's apparent that it only executes the latest append call. Here is the code:

    $('.sc-days').change(function () {
        var scedo = $('.sc-edo');
        var sclpo = $('.sc-lpo');
        var selected = $(".sc-days option:selected");
        scedo.append(selected);
        sclpo.append(selected);
    });

When this is run, only 'sclpo' will be populated. You can see the results here. http://jsfiddle.net/DF42s/

M Reza Saberi
  • 7,134
  • 9
  • 47
  • 76
prog_24
  • 771
  • 1
  • 12
  • 26
  • 1
    An element can't be in two places at once. Both calls are made. The first moves it from its current location to the `scedo` element, and the second moves it to the `sclpo` element – cookie monster Jun 16 '14 at 03:31
  • I just find it odd that it chooses the second drop down instead of the first. – prog_24 Jun 16 '14 at 03:32
  • 1
    It isn't odd. That's the final location to which you moved the `selected` element. – cookie monster Jun 16 '14 at 03:33
  • I thought it would work as you can do this sort of assignment in many other languages. – prog_24 Jun 16 '14 at 03:38
  • The DOM is a tree structure of objects. When you append a particular node, it's removed from its current location and relocated to the new location. So it's not really a language construct. It's just the structure of objects that is created from your HTML markup, and any given node in the structure can only exist in one location in the tree. – cookie monster Jun 16 '14 at 03:42

1 Answers1

5

Assuming you intended to append copies of the original, do this:

$('.sc-days').change(function () {
    var selected = $(".sc-days option:selected");
    $('.sc-edo').append(selected.clone());
    $('.sc-lpo').append(selected.clone());
});
cookie monster
  • 10,671
  • 4
  • 31
  • 45