0

我正在尝试创建的功能有这个问题。我希望脚本获取输入字段的值，以逗号分隔并放入一个数组中，该数组将立即显示为复选框列表。

代码看起来像这样

var names=new Array("Johnny","Brat","Anna");
function makelist(namelist){
    var rest = namelist.split(",");
    names.push.apply(names, rest);
}

然后我希望列表以我创建的形式立即显示

<form method="post">
    <input type="text" name="task" value="buy beer" onClick="this.value=''"/><br/>
    <input type="text" name="names"  onBlur="makelist(this.value)" value="add names seperate by comma" onClick="this.value=''"/><br/>
    <script>
        var i;
        for (i = 0; i < names.length; ++i) {
            document.write("<input type='checkbox' name='navn" + i + "'/>" + names[i] + "<br/>");
        }
    </script>
    <input type="submit" name="submit" value="roll"/>
</form>

它似乎将名称添加到数组 onblur，但我无法让它在数组更新时立即显示。

提前致谢

4

1 回答 1

0

您的主要问题是，for循环仅在首次加载时执行一次。当你想在之后更新 DOM 时，你需要一些其他的方法。

例如，下面创建了一个包含所有新元素的字符串。<div>然后通过使用将其插入到包装器中insertAdjacentHTML()。

HTML

<form method="post">
 <input type="text" name="task" value="buy beer" onClick="this.value=''"/><br/>
 <input type="text" name="names"  onBlur="makelist(this.value)" value="add names seperate by comma" onClick="this.value=''"/><br/>
 <div id="checkboxes" />
 <input type="submit" name="submit" value="roll"/>
</form>

JS

var names=new Array("Johnny","Brat","Anna");
function makelist(namelist){
  // insert to array
  var rest = namelist.split(",");
  names.push.apply(names, rest);

  // insert to dom
  var newEls = '';
  for( var i=0; i<rest.length; i++) {
   newEls += "<input type='checkbox' name='navn" + (names.length+i) + "'/>" + rest[i] + "<br/>";
  }
  document.getElementById( 'checkboxes' ).insertAdjacentHTML( 'beforeend', newEls );
}
于 2013-11-11T16:19:05.870 回答