Question

我正在开展一个考勤管理项目。我有一个下拉框，在那里招募了几个月。我想实现当我点击任何一个月时，动态按钮将被添加到分区中。假设我从下拉框中选择了1月份，那么将在分区中添加31个按钮，反之亦然。

以下是我的HTML

中的代码

＆＃13;

var counterButton = 0;

function addAllInputs(divName, inputType) {
    var newdiv = document.createElement('div');
    
    switch(inputType) {
        case 'January':
            for(i=0;i<31;i++)
            {
                newdiv.innerHTML = "Entry " + (counterText + 1) + " <br><input type='button' name='myInputs[]'>";
                counterText++;
            }               
            break;

        case 'February':
            for(i=0;i<28;i++)
            {
                newdiv.innerHTML = "Entry " + (counterText + 1) + " <br><input type='button' name='myInputs[]'>";
                counterText++;
            }               
            break;

        case 'March':
            for(i=0;i<31;i++)
            {
                newdiv.innerHTML = "Entry " + (counterText + 1) + " <br><input type='button' name='myInputs[]'>";
                counterText++;
            }               
            break;

        case 'April':
            for(i=0;i<30;i++)
            {
                newdiv.innerHTML = "Entry " + (counterText + 1) + " <br><input type='button' name='myInputs[]'>";
                counterText++;
            }               
            break;
    }
    
    document.getElementById(divName).appendChild(newdiv);
}

＆＃13;

<pre>
  <div>
    <select>
      <option value="" >January</option>
      <option value="">February</option>
      <option value="">March</option>
      <option value="">April</option>
      <option value="">May</option>
      <option value="">June</option>
      <option value="">July</option>
      <option value="">September</option>
      <option value="">October</option>
      <option value="">November</option>
      <option value="">December</option>
    </select>
  </div>
</pre>

＆＃13;

Answer 1

您需要在change元素上收听select事件，然后在change上调用您的函数，如下所示：

var select = document.getElementsByTagName('select');
select.addEventListener("change", function() {
    addAllInputs(divName,inputType);
});

当我们从下拉菜单中选择一个选项时，动态添加输入类型

1 个答案: