javascript - 如何在选择选项值上创建 x 数量的 div

Question

这是我在这里提出的第一个问题，所以我会尝试尽可能详细!我目前正在创建一个 HTML 表单，其中包含选项 1 - 4 的选择选项。我的目标是使用 Javascript 函数根据用户从表单中选择的值来创建一定数量的 div。

例如，如果用户选择了选项2，我想自动生成2个div容器。然后，如果用户选择在...之后选择另一个选项，则会创建正确数量的 div。

我选择的 HTML 目前看起来像这样；

<select id="select_seasons">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
</select>

我创建了一个脚本，它将在单击按钮时创建一个 div，但这不是我的目标；

var number = 2; 
document.getElementById('add').addEventListener('click', function( 
    ) { 
    var newDiv = document.createElement('div'); 
    newDiv.id = 'container'; 
    newDiv.innerHTML = "<label>Episode " + number + " name</label> <input type='text' name='episode'" + number +" /> <label>Episode " + number + " embed</label> <input type='text' /> ";
    document.getElementById('contain_form').appendChild(newDiv);
    number++; 
}); 

如果有人能帮助我使用实现此功能所需的 JS，我将不胜感激，我希望我在这篇文章中已经足够清楚地解释了自己!

如果需要，请随时发表评论并询问我的详细信息。

提前致谢， 山姆

Answer 1

您需要在 select 元素上绑定(bind) change 事件。像这样的事情:

var divs = [];

document.getElementById('select_seasons').addEventListener('change', function(e) {
  var n = +this.value;
  for (var i = 0; i < divs.length; i++) {
    divs[i].remove();
  }
  divs = [];
  for (var i = 0; i < n; i++) {
    var d = document.createElement("div");
    d.className = "new";
    document.body.appendChild(d);
    divs.push(d);
  }
});

.new {
  background-color: red;
  width: 100px;
  height: 20px;
  margin: 1px;
}

<select id="select_seasons">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>