CODEWITHSUNDEEP
javascript
user1550575
user1550575

Reputation: 55

calling dropdown dynamically for selecting date in html

  <select  value="dt" name="previousYear">
  <option value="2007">2007</option>
  <option value="2008">2008</option>
  <option value="2009">2009</option>
  <option value="2010">2010</option>
  <option selected="selected" value="2011">2011</option>
  <option value="2012">2012</option>
  <option value="2012">2013</option>
  <option value="2012">2014</option>
</select>
<select  value="dt" name="currentYear">
  <option value="2007">2007</option>
  <option value="2008">2008</option>
  <option value="2009">2009</option>
  <option value="2010">2010</option>
  <option selected="selected" value="2011">2011</option>
  <option value="2012">2012</option>
  <option value="2012">2013</option>
  <option value="2012">2014</option>
</select>
<select  value="dt" name="nextYear">
  <option value="2007">2007</option>
  <option value="2008">2008</option>
  <option value="2009">2009</option>
  <option value="2010">2010</option>
  <option selected="selected" value="2011">2011</option>
  <option value="2012">2012</option>
  <option value="2012">2013</option>
  <option value="2012">2014</option>
</select>

I have 3 drop down list like this previous year ,current year & next year How can i select the current year as a current year like if the current year is 2012 then it automatically have to select the 2012 when page loads can any one tell me the Javascript code for selecting dynamikcally

Upvotes: 0

Views: 1864

Answers (2)

jaychapani
jaychapani

Reputation: 1509

You should use something as 

var d = new Date();

var cur = document.getElementById('currentYear');
var prev = document.getElementById('previousYear');
var next = document.getElementById('nextYear');
var optionC, optionP, optionN;

for (var i = d.getFullYear() - 5; i <= d.getFullYear() + 5; i++) {
    optionC = document.createElement("option");
    optionC.setAttribute("value", i);
    optionC.innerHTML = i;
    cur.appendChild(optionC);
}

for (var i = d.getFullYear() - 10; i < d.getFullYear(); i++) {
    optionP = document.createElement("option");
    optionP.setAttribute("value", i);
    optionP.innerHTML = i;
    prev.appendChild(optionP);
}

for (var i = d.getFullYear() + 1; i <= d.getFullYear() + 10; i++) {
    optionN = document.createElement("option");
    optionN.setAttribute("value", i);
    optionN.innerHTML = i;
    next.appendChild(optionN);
}

cur.value = d.getFullYear();
prev.value = d.getFullYear() - 1;
next.value = d.getFullYear() + 1;​

Just add javascript function like

function setYear(obj)
{
    var prev = document.getElementById('previousYear');
    var next = document.getElementById('nextYear');   

    prev.value = Number(obj.value) - 1;
    next.value = Number(obj.value) + 1;
}

Updated demo

Upvotes: 0

Sandeep Pathak
Sandeep Pathak

Reputation: 10747

Your markup seems incorrect . I guess you are looking for something like this: 

<script type="text/javascript">
function setYear()
{
 var d = new Date();
 var x = document.getElementById("currentYear");//for select box id="currentYear"
 x.value=d.getFullYear();
}
</script>

Call it like :

<body onload="setYear()">
<!-- your markup -->
</body>

Call the above function on page load to set current year for the select box. I would suggest you to learn Javascript for better understanding as its a basic example.Hope this helps.

Upvotes: 4

Related Questions