Question

我有一个网页，其中我有一个我想重新填充的div。现在，使用Javascript以下列方式生成该div的内容：

function foo(array){
    for(i=1;i<=maxIndex;i+=1){
        document.write ("<label><input type='checkbox'/>" + array[i] + "\n </label><br />")
    }
}

我按以下方式填充div：

        <div class="bla">
        blablabla
        </div>

        <div class="myDiv" id="myDiv">
            <form name="myForm">
            <script type="text/javascript">
                foo(myArray);
            </script>
            </form>
        </div>

        <div class="blah">
             blahblahblah
             <form>
             <select onchange="updateDiv(myArray)">
                          <option value="1"> Test1 </option>
                          <option value="2"> Test2 </option>
                          <option value="3"> Test3 </option> 
             </select>
             </form>
        </div>

我想重新填充div的原因是因为我想用户可以选择div内容的排列（即，当用户从组合框中选择某个项目时，'myArray' 重新排序，然后重新填充myDiv，使内容现在以不同的顺序出现。）

function updateDiv(array){
     array.sort();
     document.getElementById('myDiv').innerHTML = '<form name="myForm"><script type="text/javascript"> foo(myArray); </script></form>';

}

我遇到的问题是我无法设法定位新的当用户选择组合框时，myDiv中的内容。

我尝试过使用innerhtml，但正确输出的新内容显示在一个全新的页面中，而不是因为JavaScript而显示在myDiv中。

编辑：现在看来问题是innerhtml更新了正确div中的代码（至少当我用firebug检查它时）但是没有显示文本（JavaScript还没有运行......？）。

我环顾四周，似乎找不到合适的解决方案。

如果有人能指出我正确的方向或让我，我将不胜感激知道我是否接近这个完全错误。

谢谢

Answer 1

您的foo()看起来不正确......这对我有用： -

<script>
function foo(array){
    for(i=0;i<array.length;i++){
        document.write ("<label><input type='checkbox'/>" + array[i] + "\n </label><br />")
    }
}
</script>

HTML code：

<div class="bla">
blablabla
</div>

<div class="myDiv" id="myDiv">
    <form name="myForm">
    <script type="text/javascript">
        // test code
        var myArray = ["a", "b"];
        foo(myArray);
    </script>
    </form>
</div>

<div class="blah">
blahblahblah
</div>

它的样子如下： -

enter image description here

Answer 2

有几个语法问题正在发生，但以下工作：

<html>
<head>
<script type="text/javascript">
function foo(arr){
    for(i=0; i<arr.length; i++){
        document.write ("<label><input type='checkbox'/>" + arr[i] + "\n </label><br />")
    }
}
</script>
</head>
<body>
        <div class="bla">
        blablabla
        </div>

        <div class="myDiv" id="myDiv">
            <form name="myForm">
            <script type="text/javascript">
              myArray = ["A","B","C"];
                foo(myArray);
            </script>
            </form>
        </div>

        <div class="blah">
        blahblahblah
        </div>
</body>
</html>

Answer 3

好的，我终于找出了问题所在：我不应该使用这么多的document.write（），它会在新页面上输出。

相反，我将所有内容存储在一个字符串中，然后仅在最后一步使用document.write（），方法如下：

var astring;

function foo(array){
    for(i=1;i<array.length;i+=1){
        astring += "<label><input type='checkbox'/>" + array[i] + "\n </label><br />";
    }

function updateDiv(array){
     array.sort();
     document.getElementById('myDiv').innerHTML = astring;
    }

将内容定位到div的问题（内容显示在新页面上）

3 个答案: