javascript - 为什么我的选择框在添加新的选择框后会重置？

Question

这一次，我在 IE6 中得到了预期的结果，但在 FF(或 Chrome)中却没有。

我有一个使用 JS 动态生成的选择框(列出位置)。 我有一个按钮，允许用户添加更多选择框，这样他们就可以选择多个位置。

当 JS 代码添加新的选择框时，已存在的选择框将被“重置”。 例如:我在第一个选择框中选择一个选项，单击按钮添加一个新的选择框，添加一个新的选择框并显示第一个选项，但我的第一个选择框也“重置”为第一个选项，相反到我已经选择的选项。

好像页面刷新了，但事实并非如此。

我不知道出了什么问题，我已经尝试为每个盒子分配唯一的 ID，但没有成功。这是代码:

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 代码:

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 />"
}

预先感谢您提供的任何帮助/见解!

Answer 1

看来问题是在使用innerHTML添加换行符时出现的。再次尝试使用appendChild，如下所示

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

据我所知，由于某种原因，浏览器的innerHTML值与当前选择不同步。因此浏览器获取innerHTML的当前值，附加<br/>并刷新元素，删除您的选择。不过，这应该可以帮助您解决这个问题。