ダイナミックデータドロップダウンリストから選択オプションを表示する方法

Question

私の考えは、クレジットカードの検証を行うことです。クレジットカードの年では、データは現在の年に応じて動的に生成する必要があります。 例私たちは2016年です。2016年から2040年のようなドロップダウンデータが表示されるように、ドロップダウンデータは動的です。私はそれを達成しました。しかし、ここでは "selectオプション"を表示することです。

私は私にそれを行うにはいくつかのアイデアを与える..検証を実行するための最初の選択オプションを表示したい。.. ここに私のサンプルコードは..です

<select id="ccyear" name="ccyear"></select><br> 
 
    <span> 
 
    <script> 
 
    var start =new Date().getFullYear(); 
 
    var end = new Date().getFullYear() + 24; 
 
    var options = ""; 
 
\t for(var year = start ; year <=end; year++) 
 
\t { 
 
    options += "<option>"+ year +"</option>"; 
 
\t } 
 
\t document.getElementById("ccyear").innerHTML = options; 
 
    </script> 
 
    </span>

Answer 1

onchangeイベントは、ユーザーの値を取得するのは簡単です。この

<select id="ccyear" name="ccyear" onchange="test()"></select><br> 
 
    <span> 
 
    <script> 
 
    (function(){ 
 
    var start =new Date().getFullYear(); 
 
    var end = new Date().getFullYear() + 24; 
 
    var options = ""; 
 
\t for(var year = start ; year <=end; year++) 
 
\t { 
 
    options += "<option>"+ year +"</option>"; 
 
\t } 
 
\t document.getElementById("ccyear").innerHTML = "<option>Select option</option>"+options; 
 
     console.log(document.getElementById("ccyear").value); 
 
     })() 
 
    function test(){ 
 
     console.log(document.getElementById("ccyear").value); 
 
     } 
 
    </script> 
 
    </span>

Answer 2

you'rが作業している場合phpそれではどうしようもないphp script

すると、このphpコードを試してみてください -

<?php 
date_default_timezone_set('Asia/Kolkata'); 
$current_year = date('Y'); 
$end_year = date('Y', strtotime('+24 year')); 

$select = '<select id="ccyear" name="ccyear">'; 
for($i = $current_year; $i <= $end_year; $i++) 
    $select .= '<option value="'.$i.'">'.$i.'</option>'; 

$select .= '</select>'; 

echo $select; 
?> 

Answer 3

変更を選択します。

var options = ""; 

これに

：

var options = "<option>Select Option</option>"; 

Here is the JSFiddle demo

Answer 4

私はあなたが

<select id="ccyear" name="ccyear"> 
 
    <option value=''> Select Project </option> 
 
</select><br> 
 
<script> 
 
var start =new Date().getFullYear(); 
 
var end = new Date().getFullYear() + 24; 
 
var options = ""; 
 
for(var year = start ; year <=end; year++) 
 
{ 
 
options += "<option>"+ year +"</option>"; 
 
} 
 
document.getElementById("ccyear").innerHTML = "<option value=''> Select Option </option>"+options; 
 
</script>

Answer 5

あなただけへのjQueryの追記機能を使用することができるため、これは便利だと思います行う それ。 また、各オプション要素にvalue属性を指定することをお勧めします。

コードは次のようになります。

var start = new Date().getFullYear(); 
var end = start + 24; 
for (var year = start; year <= end; year++) { 
    console.log("loop"); 
    $("#ccyear").append('<option value="' + year + '">' + year + '</option>'); 
} 

あなたは... https://jsfiddle.net/arijitkanrar/pfgwa2n2/

Answer 6

変更このvar options = "";ライン

<select id="ccyear" name="ccyear"></select><br> 
 
    <span> 
 
    <script> 
 
    var start =new Date().getFullYear(); 
 
    var end = new Date().getFullYear() + 24; 
 
    var options = "<option>Select Option</option>"; 
 
\t for(var year = start ; year <=end; year++) 
 
\t { 
 
    options += "<option>"+ year +"</option>"; 
 
\t } 
 
\t document.getElementById("ccyear").innerHTML = options; 
 
    </script> 
 
    </span>

Answer 7

これにしてみてくださいvar options = "<option>Select Option</option>";にここにコードをチェックアウトすることができます

<select id="ccyear" name="ccyear"></select><br> 
 
    <span> 
 
    <script> 
 
    var start =new Date().getFullYear(); 
 
    var end = new Date().getFullYear() + 24; 
 
    var options = ""; 
 
    var i = 0; 
 
    for(var year = start ; year <=end; year++) 
 
    { 
 
\t if (i == 0){ 
 
\t \t options += "<option selected>Select option</option>"; 
 
\t \t i++; 
 
\t } else { 
 
\t \t options += "<option value="+ year+">"+ year +"</option>"; 
 
    } 
 

 
} 
 
document.getElementById("ccyear").innerHTML = options; 
 
</script> 
 
    </span>