当前位置 : 主页 > 编程语言 > java >

如何在jsp中使用javascript动态创建下拉框?

来源:互联网 收集:自由互联 发布时间:2021-06-25
我正在尝试动态创建下拉框,就像当我点击添加按钮时,它必须创建新的下拉框.下拉列表还包含动态值,就像它需要占用当前年份并且必须显示最多五年.请建议我这样做. 谢谢.. 这是我试过
我正在尝试动态创建下拉框,就像当我点击添加按钮时,它必须创建新的下拉框.下拉列表还包含动态值,就像它需要占用当前年份并且必须显示最多五年.请建议我这样做.

谢谢..

这是我试过的代码.

javascript代码:

function Add()
{

  var name1 = document.createElement("select");
  name1.setAttribute('id',"year1")
  name1.setAttribute('oncreate',"Date1()");
}

function Date1(){
  d = new Date();
  curr_year = d.getFullYear();
  for(i = 0; i < 5; i++)
  {
    document.getElementById('year1').options[i] = new Option((curr_year-1)-i,(curr_year-1)-i);
  }
}

HTML代码:

<input type="button" name="add" value="Add" onclick="Add();">
HTML代码

<div id="select-container">
</div>
<button id="add" onclick="addSelect('select-container');">Add Dropdown</button>

Javascript代码

function dateGenerate() {
   var date = new Date(), dateArray = new Array(), i;
   curYear = date.getFullYear();
    for(i = 0; i<5; i++) {
        dateArray[i] = curYear+i;
    }
    return dateArray;
}

function addSelect(divname) {
   var newDiv=document.createElement('div');
   var html = '<select>', dates = dateGenerate(), i;
   for(i = 0; i < dates.length; i++) {
       html += "<option value='"+dates[i]+"'>"+dates[i]+"</option>";
   }
   html += '</select>';
   newDiv.innerHTML= html;
   document.getElementById(divname).appendChild(newDiv);
}

请通过以下小提琴. JS Fiddle to insert select element dynamically

每当您单击添加下拉按钮时,它将创建一个连续五年选项的选择元素.

网友评论