更新

Question

我正在尝试创建一个用户可以选择一个月的表单，然后显示该月中所有日期的复选框。

现在，我有了这个：

<form name="form">
<div>
<label for="month">Maand:</label>
<select id="month" name="month" onChange="selMonth()">
  <option value="-1" disabled selected>--Pick A Month--</option>
  <option value="4" >april</option>
  <option value="5" >mei</option>
  <option value="6" >juni</option>
</select>
</div>
<div>
Days:<br />
<script type="text/javascript">
function daysInMonth(month,year) 
{
  return new Date(year, month, 0).getDate();
}
function selMonth() {
  var slctdM = document.form.month.value;
  var dys = daysInMonth(slctdM,2014);
  for(i = 1; i <= dys ; i++)
  {
    document.write('<span style="width:10%;display:inline-block;"><input type="checkbox" id="' + i + '" /><label for="day_' + i + '">Dag ' + i + '</label></span>');
  }
}
</script>
</div>
</form>

我得到正确的值，并显示正确的框数，但擦除页面上的所有内容（因此，页面和表单的其余部分将被删除。此外，页面将在所有框显示后继续加载屏幕。

可能有一个简单的解决方法，或者我犯了一个愚蠢的错误，因为我对javascript并不熟悉。起初我用php编写了for循环，但我决定使用javascript代替，因为我希望在选择某个月时动态更新框的数量。

更新

我现在看到该页面仅在Firefox中加载，在Chrome页面完成加载，但只显示框。

我认为问题在于函数selMonth（），因为它是用onChange调用的，所以当月份改变时，它只会执行document.write，并认为它可以忘记其余部分。但我不知道如何解决这个问题。将循环移到函数外部并不能解决我的问题。

Answer 1

您可能希望使用.innerHTML代替document.write() 我想你想做的是这样的事情：

DEMO：http://jsfiddle.net/UaAX5/

HTML：

Days:<br />
<div id="days_area"></div>

JavaScript的：

function selMonth() {
  var slctdM = document.form.month.value;
  var dys = daysInMonth(slctdM,2014);
  var boxes = "";
  for(i = 1; i <= dys ; i++)
  {
    boxes += '<span style="width:10%;display:inline-block;">'+
              '<input type="checkbox" id="' + i + '" />'+
               '<label for="day_' + i + '">Dag ' + i + '</label></span>';
  }
  document.getElementById('days_area').innerHTML = boxes;
}

innerHTML的文件在这里：
https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML 希望这会有所帮助。

Answer 2

document.write会覆盖整个文档。

您应该做的是附加到表单的innerHTML。

function selMonth() {
  var slctdM = document.form.month.value;
  var dys = daysInMonth(slctdM,2014);
  var frm = document.forms[0];
  for(i = 1; i <= dys ; i++)
  {
    frm.innerHTML += '<span style="width:10%;display:inline-block;"><input type="checkbox" id="' + i + '" /><label for="day_' + i + '">Dag ' + i + '</label></span>';
  }
}

显示基于所选月份的天数（使用for循环）

更新

2 个答案: