2013-10-21 103 views
3

我想創建下拉框動態,就像當我點擊添加按鈕它必須創建新的下拉框。下拉列表還包含需要採用當前年份的動態值,並且必須顯示爲五年。請建議我這樣做。如何在jsp中動態使用javascript創建下拉框?

謝謝..

這是我試過的代碼。

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();"> 
+0

這不是JSP。這是JAVASCRIPT。 –

回答

5

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

它,只要你點擊添加下拉按鈕會創建的連續五年選項的選取元素。

+0

檢查這個更新的小提琴。 [JS Fiddle Link](http://jsfiddle.net/vigneshmoha/bbxMe/3/) – vigneshmoha

+0

謝謝。 @vigneshmoha – user2867157

2
function abc() 
{ 

var x=document.getElementById('Select1').value; 
var newDiv=document.createElement('div'); 
var html = '<select id="d2">'; 
for(i = x; i < 47; i++) { 
    html += "<option value='"+i+"'>"+i+"   </option>"; 
    } 
    html += '</select>'; 
    newDiv.innerHTML= html; 
      document.getElementById('drop').appendChild(newDiv); 
    } 




Html: 

    <select id='Select1' onchange='abc()'> 
    <option value='1'>1</option> 
.... 
... 
    <div id ='drop'></div> 
相關問題