Question

对不起。 Javascript（使用jquery）noob在这里。这是问题所在。

我有一个带数字的选择字段：

<div class="controls">
  <select class="span2" id='select1' onchange="addstuff()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>
<div id="addfields"></div>

然后我遍历指定的数字，并在div标签中添加一些html id为“select1”。

function addstuff()
{
  var num = parseInt($('#select1').val())
  if (num != 0)
  {
    for (i=0; i<num;i++)
      {
        new_field += "<p>" + num + "</p>";
      }
  $('#addfields').html(new_field);
  }
}

因此，如果我选择3的选项，将添加以下html：

<p> + num + </p>
<p> + num + </p>
<p> + num + </p>

但是，如果我选择2，则会追加2个字段：

<p> + num + </p>
<p> + num + </p>
<p> + num + </p>
<p> + num + </p>
<p> + num + </p>

但是，我希望清除之前的html，我只想要两个条目。

<p> + num + </p>
<p> + num + </p>

如果有人能帮助我看看我所缺少的东西，我将不胜感激。谢谢！

Answer 1

您永远不会初始化new_field，无论如何都应该这样做。如果你这样做，你的问题也将得到解决。

function addstuff() {
    var new_field = '';

顺便说一下，由于使用jQuery，使用事件绑定比使用事件属性更容易。而不是onchange="addstuff()"，请执行：

$("#select1").on('change', addstuff);

您也可以放弃定义addstuff并将其绑定为匿名函数。

Answer 2

简单易用，谢谢你添加了很多解释和代码......这应该做你想做的事情：

function addstuff()
{
  var num = parseInt($('#select1').val());
  var new_field = "";
  if (num != 0)
  {
    for (i=0; i<num;i++)
      {
        new_field += "<p>" + num + "</p>";
      }
  $('#addfields').html(new_field);
  }
}

主要看起来你没有重新初始化那个new_field变量，所以它刚刚建立......因为jquery .html（）会覆盖addfields中的任何内容，这意味着如果你看到积累那是因为你的new_field变量实际上包含了构建。

Javascript - 如何重置字段onchange

2 个答案: