How to create dropdown box dynamically using javascript in jsp?

Question

I am trying to create drop down boxes dynamically, like when I click on add button it has to create new drop down box. And drop down list also contains dynamic values like it needs to take current year and has to show up to plus five years. please suggest me to do this.

Thank you..

Here is the code that I tried.

javascript code:

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 code:

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

That's not JSP. That's JAVASCRIPT.

Diodeus - James MacFarlane
– Diodeus - James MacFarlane

2013-10-21 14:39:28 +00:00
Commented Oct 21, 2013 at 14:39 — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Oct 21, 2013 at 14:39

Mohan Annasamy · Accepted Answer · 2013-10-21 16:26:24Z

5

HTML Code

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

Javascript Code

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);
}

Please go through the following fiddle. JS Fiddle to insert select element dynamically

It 'll create a select element with option of five consecutive years whenever you click the add dropdown button.

answered Oct 21, 2013 at 16:26

Mohan Annasamy

3663 gold badges5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohan Annasamy Over a year ago

Check this updated fiddle too. JS Fiddle Link

div · Accepted Answer · 2014-01-08 10:21:24Z

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>

answered Jan 8, 2014 at 10:21

div

563 bronze badges

Collectives™ on Stack Overflow

How to create dropdown box dynamically using javascript in jsp?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related