CODEWITHSUNDEEP
jquery
Surfine
Surfine

Reputation: 392

How to automatically change value of <option> tag depending on the date?

I was wondering if it was possible to have something like a jQuery to automatically change the value of <option> tag so I dont have to manually add the years for the <option> tag.

Example: The year is 2013, so the <option> tag should display 60 years starting from 2008.

My code looks like this: 

<table>
    <tr>
        <td>
<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
            <label />
            <select style="width:50px;">
                <option>01</option>
                <option>02</option>
                <option>03</option>
                <option>04</option>
                <option>05</option>
                <option>06</option>
                <option>07</option>
                <option>08</option>
                <option>09</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
                <option>13</option>
                <option>14</option>
                <option>15</option>
                <option>16</option>
                <option>17</option>
                <option>18</option>
                <option>19</option>
                <option>20</option>
                <option>21</option>
                <option>22</option>
                <option>23</option>
                <option>24</option>
                <option>25</option>
                <option>26</option>
                <option>27</option>
                <option>28</option>
                <option>29</option>
                <option>30</option>
            </select>
            </td>
        <td>
<p>/</p>
        </td>
        <td>
        <!--[if !IE]> --></div> <!-- <![endif]-->
<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
            <label />
            <select style="width:50px;">
                <option>01</option>
                <option>02</option>
                <option>03</option>
                <option>04</option>
                <option>05</option>
                <option>06</option>
                <option>07</option>
                <option>08</option>
                <option>09</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
            </select>
        <!--[if !IE]> --></div> <!-- <![endif]-->
            </td>
        <td>
<p>/</p>
        </td>
        <td>
        <!--[if !IE]> --></div> <!-- <![endif]-->
<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
            <label />
            <select style="width:70px;">
                <option>1901<option>
                <option>1902</option>
                <option>1903</option>
                <option>1904</option>
                <option>1905</option>
                <option>1906</option>
                <option>1907</option>
                <option>1908</option>
                <option>1909</option>
                <option>1910</option>
                <option>1911</option>
                <option>1912</option>
                <option>1913</option>
                <option>1914</option>
                <option>1915</option>
                <option>1916</option>
                <option>1917</option>
                <option>1918</option>
                <option>1919</option>
                <option>1920</option>
                <option>1921</option>
                <option>1922</option>
                <option>1923</option>
                <option>1924</option>
                <option>1925</option>
                <option>1926</option>
                <option>1927</option>
                <option>1928</option>
                <option>1929</option>
                <option>1930</option>
                <option>1931</option>
                <option>1932</option>
                <option>1933</option>
                <option>1934</option>
                <option>1935</option>
                <option>1936</option>
                <option>1937</option>
                <option>1938</option>
                <option>1939</option>
                <option>1940</option>
                <option>1941</option>
                <option>1942</option>
                <option>1943</option>
                <option>1944</option>
                <option>1945</option>
                <option>1946</option>
                <option>1947</option>
                <option>1948</option>
                <option>1949</option>
                <option>1950</option>
                <option>1951</option>
                <option>1952</option>
                <option>1953</option>
                <option>1954</option>
                <option>1955</option>
                <option>1956</option>
                <option>1957</option>
                <option>1958</option>
                <option>1959</option>
                <option>1960</option>
                <option>1961</option>
                <option>1962</option>
                <option>1963</option>
                <option>1964</option>
                <option>1965</option>
                <option>1966</option>
                <option>1967</option>
                <option>1968</option>
                <option>1969</option>
                <option>1970</option>
                <option>1971</option>
                <option>1972</option>
                <option>1973</option>
                <option>1974</option>
                <option>1975</option>
                <option>1976</option>
                <option>1977</option>
                <option>1978</option>
                <option>1979</option>
                <option>1980</option>
                <option>1981</option>
                <option>1982</option>
                <option>1983</option>
                <option>1984</option>
                <option>1985</option>
                <option>1986</option>
                <option>1987</option>
                <option>1988</option>
                <option>1989</option>
                <option>1990</option>
                <option>1991</option>
                <option>1992</option>
                <option>1993</option>
                <option>1994</option>
                <option>1995</option>
                <option>1996</option>
                <option>1997</option>
                <option>1998</option>
                <option>1999</option>
                <option>2000</option>
                <option>2001</option>
                <option>2002</option>
                <option>2003</option>
                <option>2004</option>
                <option>2005</option>
                <option>2006</option>
                <option>2007</option>
                <option>2008</option>
                <option>2009</option>
                <option>2010</option>
            </select>
        <!--[if !IE]> --></div> <!-- <![endif]-->
        </td>
    </tr>
</table>

I am looking for something which sort of adds up the date using variables.
like:-
var p_year = 1995
var n_year = p_year + 1
and I need to stop it when it reaches 2008. Any ideas?

jsfiddle

Upvotes: 1

Views: 200

Answers (7)

Jijin Sebastian
Jijin Sebastian

Reputation: 1

<ul id="years_list"></ul>
<script type="text/javascript">
var year_start = 1950;
var year_end = 2016;
var $years_list = $('#years_list');
for(var i = year_start; i<= year_end; i++)
{
$years_list.append('<li>' + i + '<li>');
}
</script>

Upvotes: 0

KevinIsNowOnline
KevinIsNowOnline

Reputation: 773

You can check out this jquery each() functionality.

    var today = new Date();
    var newDate = today.getFullYear();
    console.log(today.getFullYear());
    $('option').each(function (){
    $(this).text(newDate).attr('id', newDate);
        newDate -=1;

    });

You can check this jsFiddle Link for more info.

Upvotes: 0

Davor Mlinaric
Davor Mlinaric

Reputation: 2017

check this http://jsfiddle.net/D6YJa/6/ i change a bit your code.

$(function () {
    for (var y = 1999; y < 2013; y++) {
        $("#year").append("<option value='" + y + "'>" + y + "</option>");
    }
    for (var m = 1; m < 13; m++) {
        $("#month").append("<option value='" + m + "'>" + m + "</option>");
    }
    for (var d = 1; d < 31; d++) {
        $("#day").append("<option value='" + d + "'>" + d + "</option>");
    }
});

Upvotes: 1

Friederike
Friederike

Reputation: 1282

Try something like this:

HTML

<select id="selectYear"></select>

JS

var startYear = 1995; // or whatever your start year is
var numberOfYearsToShow = 60;
for (var year=startYear; year < startYear + numberOfYearsToShow; year++)
{
     $('#selectYear').append("<option>"+year+"</option>");
}

Of course you can also determine the startYear automatically:

var startYear = new Date().getFullYear() - 5; // = 2008 while we're in 2013

Upvotes: 0

user2281294
user2281294

Reputation:

use something like this

<div id="mydiv"></div>
<script type="text/javascript">
  createOptions();
  function createOptions() {
  var startyear=1995;
  var endyear=2008;
  var selectObject = $('<select/>', { id: "mySelect" });
  for (i = startyear; i <= endyear; i++) {
      selectObject.append($('<option/>', { value: i,text:i }));
  }
  $("#mydiv").append(selectObject);
   }
</script>

Upvotes: 1

Adil Shaikh
Adil Shaikh

Reputation: 44740

var y = 1995;
for (var i = y; i <= (y+60); i++) {
 $("#year").append("<option >" + i + "</option>")
 if(i == 2008){
  break;
 }
}

http://jsfiddle.net/mohammadAdil/D6YJa/3/

Upvotes: 1

basarat
basarat

Reputation: 276239

Have your select as 

<select style="width:70px;" id="year"></select>

Then look and add the elements: 

for(var year = 1995 ; year <=2008 ; year++){
     $("#year").append("<option value='"+year+"'>"+year+"</option>")
}

Upvotes: 1

Related Questions