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

提前感谢您提供的任何帮助/见解！

Answer 1

使用innerHTML添加换行符时，似乎会出现问题。请尝试再次使用appendChild，如下所示

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

据我所知，由于某种原因，浏览器的innerHTML值与当前选择不一致。因此浏览器获取innerHTML的当前值，追加<br/>并刷新元素，删除您的选择。这应该可以让你解决它。

为什么我的选择框在追加一个新的？

1 个答案: