0

我正在尝试创建一个动态下拉列表，该下拉列表将占用当前年份并再迭代 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/>");
}
4

6 回答 6

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 字符串；等等），但我会留给你.

于 2013-02-21T16:17:56.737 回答
0

仅使用纯 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 小提琴演示。

于 2013-02-21T16:13:09.483 回答
0

正如 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);
}
于 2013-02-21T16:28:10.630 回答
0 
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));
}
于 2013-02-21T16:10:24.230 回答
0

不使用 jquery 它看起来像这样

 var options = "";
 for(var i = date; i < length; i++){
     options += "<option value='"+ i +"'>" + i + "<option/>";
 }
 document.getElementById('select').innerHTML = options;
于 2013-02-21T16:11:53.177 回答
0

在这里你有，我也建议你使用 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>';

}
于 2013-02-21T16:14:08.037 回答