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

私のスクリプトを最適化するためのいくつかのポイント (すべての要素を 1 つずつ追加するのではなく、一度に追加することをお勧めします。jQuery に HTML 文字列を解析させるのではなく、テンプレートを作成して単に複製することを検討してください。など)、それはあなたに任せます。 .

于 2013-02-21T16:17:56.737 に答える
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 を使用する:

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

ここでは、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 に答える
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

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 に答える