I wasn't sure what to call this one.

I have a div being opened as a popup via SimpleModal - well, first I clone it, then I open the clone. In this div there is a form with a SELECT list, which is populated on page load with the data as it is at that point. You can add a new item to that list - if you choose to do that your data gets sent back to the DB and I wrote some jQuery to update the SELECT list with your new item so you can reuse it again.

I also want to update the SELECT list in the original DIV, so that when it is cloned and opened again the SELECT list reflects this change.

SO there are 2 divs, therefore 2 SELECT lists to update, so I'm using .each() to do it.

The problem is that although the new option appears to be added, it is almost immediately deleted again and I can't see why.

                    var newOption = $('<option />');
                    newOption.val(data.id);
                    newOption.html(popup.find(':text[name=new_exercise_name]').val());
                    newOption.attr('selected', 'selected');
                    // Insert the new option into the select list.
                    $('.popup[data-classification=' + classification + ']').each(function(index){
                        $(this).find('select[name=exercise] option[value!=""]').eq(n).before(newOption);
                        alert(index + " - 1 HTML: " + $(this).find('select[name=exercise]').html());
                    });

                    // Now do another alert to test what's happened....
                    $('.popup[data-classification=' + classification + ']').each(function(index){
                        alert(index + " - 2 HTML: " + $(this).find('select[name=exercise]').html());
                    });

This is just a snippet, I've stripped it down to make it clearer.

As you can see I'm putting in some alerts to see what's happening. The first alert shows the OPTION lists of both DIVS, both including the new one - that's what I want.

BUT the second alerts show the first option list to NOT have that new item anymore - it's one line later in the code and somehow the contents are changed back?

Any ideas on what to look for here?

the same thing happens in FF3 and Chrome

Not sure if you can just add options to a select using jQuery DOM manipulation like before() ... don't you have to use the JS method add()? This is just off the top of my head...IIRC a select list has an internal array of options and I'm not sure that writing html directly to the DOM will update it correctly.

If that's not it then I'd have to do some detective work myself -- let me know and I'll have a closer look.

I worked it out, thank god. As ever it wasn't anything mysterious... just a simple bug in my own damn code.

I was creating a new OPTION object and adding it first to one SELECT, then to another.

Of course, by adding it to the second SELECT, you also move it out of the first.

So now I've just made 2 new OPTION objects.

I had to make a simple version to try to replicate the problem to figure this out, it took ages to make the simple version fail in the same way.

It's a bit scruffy... Persist would rightly have me shot... but I've gotta crack on with this

I really have to work on my debugging skills though... I have to stop thinking shit like 'maybe it's because you can't change a SELECT list that's not currently visible', 'maybe it's a bug in SimpleModal' and other nonsense. It never helps.

Originally posted by: DontBogartMe I was creating a new OPTION object and adding it first to one SELECT, then to another.

Of course, by adding it to the second SELECT, you also move it out of the first.

Ha, yeah of course

Good you got it sorted though. :thumbsup: