Question

我想知道是否有可能像jQuery那样自动更改<option>代码的值，所以我不必手动添加<option> tag的年份。<登记/>
示例：年份是2013年，因此<option>标记应显示从2008年开始的60年。

我的代码如下所示：

<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

Answer 1

选择

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

然后查看并添加元素：

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

Answer 2

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/

Answer 3

使用类似的东西

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

Answer 4

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

Answer 5

尝试这样的事情：

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

当然你也可以自动确定startYear：

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

Answer 6

您可以查看此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了解详情。

Answer 7

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

如何根据日期自动更改<option>标签的值？</option>

7 个答案: