如何从动态数据下拉列表中显示选择选项

Question

我的概念是进行信用卡验证。在信用卡年度，数据应根据当前年份动态生成..它应该只显示即将到来的年份。 例如。 我们在2016年..所以下拉数据将显示为2016年至2040年......下拉数据是动态的..我已经实现了它..但是，我的问题是显示“选择选项”

我想首先显示选择选项以执行验证..给我一些想法来做到这一点..这是我的示例代码..

 <select id="ccyear" name="ccyear"></select><br> <span> <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 = options; </script> </span> 

Answer 1

试着这个......

 <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++) { if (i == 0){ options += "<option selected>Select option</option>"; i++; } else { options += "<option value="+ year+">"+ year +"</option>"; } } document.getElementById("ccyear").innerHTML = options; </script> </span> 

Answer 2

改变这个var options = ""; line to 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 = "<option>Select Option</option>"; for(var year = start ; year <=end; year++) { options += "<option>"+ year +"</option>"; } document.getElementById("ccyear").innerHTML = options; </script> </span> 

Answer 3

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 = ""; for(var year = start ; year <=end; year++) { options += "<option>"+ year +"</option>"; } 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 4

改变这个：

var options = "";

对此：

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

这是JSFiddle演示

Answer 5

我认为这对你有用

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

你可以使用jQuery的append函数来做到这一点。 我还建议为每个选项元素提供一个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 7

如果你使用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;
?>