如何根據日期自動更改<option>標記的值？

我想知道是否有可能有類似jQuery的東西來自動更改<option>標記的值，因此我不必爲<option> tag手動添加年。

例子：這一年是2013年，所以<option>標籤應該顯示器60年後2008年如何根據日期自動更改<option>標記的值？

開始我的代碼如下所示：

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

我在尋找一些種類的增加使用變量來更新日期。
，如： -
var p_year = 1995
var n_year = p_year + 1
，我需要停下來，當它達到2008年的任何想法？

jsfiddle

來源

2013-04-26 Tom

我不明白的邏輯：*「這一年是2013年，所以

你爲什麼不乾脆用[jQuery的datapicker] （http://jqueryui.com/datepicker/#min-max）？它甚至可以限制數據範圍。 – Alepac 2013-04-26 11:44:04

問題不清楚。請解釋更多 – Roger 2013-04-26 11:45:10

有你的選擇爲

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

然後再看看，並添加元素：

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

來源

2013-04-26 11:42:41 basarat

嘗試是這樣的：

HTML

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

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

當然你也可以自動判斷startYear：

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

來源

2013-04-26 11:43:34 Friederike

你可以看看這個jQuery each()功能。

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

    });

您可以檢查此jsFiddle Link獲取更多信息。

來源

2013-04-26 11:45:41 KevinIsNowOnline

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/

來源

2013-04-26 11:45:46

Assalaam alaikum，謝謝！非常好地完成！ – Tom 2013-04-27 02:09:12

使用這樣的事情

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

來源

2013-04-26 11:47:48

檢查這個http://jsfiddle.net/D6YJa/6/ 我改了一下你的代碼。

$(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>"); 
    } 
});

來源

2013-04-26 11:50:39

做得很好！謝謝你，兄弟！ – Tom 2013-04-27 02:06:34

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

來源

2013-04-26 12:00:55

解釋你的答案 – 2013-04-26 12:18:46

如何根據日期自動更改<option>標記的值？

回答

相關問題