why do my select boxes reset after appending a new one?

Question

For once, I am getting the intended results in IE6, but not FF (or Chrome).

I have a select box (listing locations) which is dynamically generated using JS. I have a button that allows the user to add more of the select boxes, so they can choose more than one location.

When the JS code adds the new select box, the already present select boxes get 'reset'. ex: I choose an option on the first select box, click the button to add a new select box, a new select box is added and shows the first option, but my first select box 'resets' to the first option as well, opposed to the option I had already selected.

It's like the page is refreshing, but it's not.

I don't know what wrong, I've already tried assigning unique ID's to each box to no prevail. Here is the code:

HTML:

<!-- BEGIN select location box - "slb" -->
    <div id="selectLocationBox">
        <div id="slb_top">
           select location(s) you wish to view results for:
        </div>
        <div id="slb_mid">
            <script language="javascript">
                add_LocationBar()
            </script>
        </div>
        <div id="slb_bot">
            <a onclick="add_LocationBar()">add another location</a>              
            <input id="loc_hiddenInpt" type="hidden" runat="server" />     <!-- this hidden input box is used to save the part of query dealing with locations, JS will check any location drop down boxes and then put applicable part of query in this hidden input so ASP page can use it -->
        </div>
    </div>

    <!-- END select location box - "slb" -->

JS CODE:

function add_LocationBar() {

//create and populate array
var ary_locations = new Array("SELECT", "--select--", "ABE", "Aberdeen, Scotland", "ABU", "Abu Dhabi, United Arab Emirates", "AAB", "Addis Ababa, Ethiopia", "ADD", "Addlestone, United Kingdom", "AKA", "Akasaka, Japan", "ALB", "Al Bidah, Kuwait", "ABA", "Albacete, Spain");

//create select drop down box
var loc_select = document.createElement("select");

//populate select box with options from array
for (var c = 0; c < ary_locations.length; c=c+2) {
    var opt1 = document.createElement("option");
    opt1.value = ary_locations[c]
    opt1.text = ary_locations[c+1]
    loc_select.options.add(opt1);
}
//add drop down to box
document.getElementById("slb_mid").appendChild(loc_select);
document.getElementById("slb_mid").innerHTML += "<br />"
}

Thank you in advance for any help/insight you can provide!

Answer 1

It appears that the problem occurs when you use innerHTML to add the line break. Try using appendChild again like below

document.getElementById("slb_mid").appendChild(loc_select);
document.getElementById("slb_mid").appendChild(document.createElement("br"))

As far as I can tell the browser's innerHTML value is not up to date with the current selection for some reason. So the browser grabs the current value of innerHTML, appends <br/> and refreshes the element, erasing your selection. This should get you around it though.