如何從動態數據下拉列表中顯示選擇選項

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