Question

我正在尝试创建一个动态下拉列表，该下拉列表将占用当前年份并再延长15年，因此我不必继续更新信用卡年份下拉字段。我已经成功构建了for循环，但似乎无法弄清楚如何将它放在select标签中。

任何帮助都会很棒！

这是迭代日期的for循环。这是我的CodePen

var date = new Date().getFullYear();
var length = date + 16;

for(var i = date; i < length; i++){
  document.write("<br/>" + i + "<br/>");
}

Answer 1

嗯，你肯定想要得到类似下面的内容，对吧？

<select>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <!-- ... -->
    <option value="2027">2027</option>
</select>

因此，您应该在循环中创建<option>元素，并将它们放入<select>元素中。有点像这样：

var year = new Date().getFullYear(),
    $select = $('select').empty()  // be sure to select the proper, ahem, select
    ;

for(var i = 0; i < 15; i++) {
    $('<option>')          // creates an <option> element
        .val(year + i)     // sets its value
        .text(year + i)    // sets the text inside
        .appendTo($select) // puts it into your <select>
    ;
}

我的脚本中有几点需要优化（支持一次性添加所有元素而不是一个一个;考虑创建一个模板而只是克隆，而不是让jQuery解析你的HTML字符串;等等），但我会留下由你决定。

Answer 2

var date = new Date().getFullYear();
var length = date + 16;

var select = $("#select");
select.empty();
for(var i = date; i < length; i++){
  select.append($('<option></option>').val(i).html(i));
}

Answer 3

不使用jquery它看起来像这样

 var options = "";
 for(var i = date; i < length; i++){
     options += "<option value='"+ i +"'>" + i + "<option/>";
 }
 document.getElementById('select').innerHTML = options;

Answer 4

仅使用纯JavaScript：

var date = new Date().getFullYear(),
    sel = document.getElementById('select'),
    prop = 'textContent' in document.createElement() ? 'textContent' : 'innerText',
    opt;

for (var i = 0, len = 16; i < len; i++) {
    opt = document.createElement('option');
    opt.value = date + i;
    opt[prop] = date + i;
    sel.appendChild(opt);
}

JS Fiddle demo

Answer 5

这里有你，我也建议你使用javascript框架，例如JQuery。

var date = new Date().getFullYear();

var length = date + 16;

document.getElementById('select').innerHTML = '';

for(var i = date; i < length; i++){

  document.getElementById('select').innerHTML += '<option value="'+i+'">'+i+'</option>';

}

Answer 6

正如Richard Neil Ilagan所说，您应该创建<option>元素并将它们附加到<select>元素。这是一个没有jQuery的解决方案

var select = document.getElementById("select");
var startYear = new Date().getFullYear();
var option, currentYear;

for(var i = 0; i <= 15; i++) {
  currentYear = startYear + i;

  option = document.createElement("option");
  option.setAttribute("value", currentYear);
  option.appendChild(document.createTextNode(currentYear));

  select.appendChild(option);
}

使用JavaScript创建动态信用卡下拉列表

6 个答案: