My concept is to perform credit card validation.. In credit card year the data should be generated dynamically depending upon the current year.. it should show only uping years. Eg. We are in 2016.. So that the dropdown data will be display like 2016 to 2040.. the dropdown data is dynamic.. i have achieved it as well.. But, Here my problem is to display "select Option"

I want to show select option first for performing validation.. Give me some idea to do that.. Here is my sample code..

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

My concept is to perform credit card validation.. In credit card year the data should be generated dynamically depending upon the current year.. it should show only uping years. Eg. We are in 2016.. So that the dropdown data will be display like 2016 to 2040.. the dropdown data is dynamic.. i have achieved it as well.. But, Here my problem is to display "select Option"

I want to show select option first for performing validation.. Give me some idea to do that.. Here is my sample code..

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

• javascript
• php
• jquery
• html
• css

• You should add value attribute as well for do that.Its like this.. for(var year = start ; year <=end; year++) { options += "<option value='"+year+"'>"+ year +"</option>"; } then try it. – Aruna Warnasooriya Commented Oct 26, 2016 at 5:44
• did not get your question.@Nithya – Rajesh Patel Commented Oct 26, 2016 at 5:49
• Yup...Please perfectly explain your question..It's confusing..! – Umair Shah Commented Oct 26, 2016 at 5:49
• i want to display "select option" in dropdown.. If user tap on "select" then i want to show the list of years .. – Nithya Commented Oct 26, 2016 at 5:51
• You can try this... Replace var options = ""; with var options = "<option selected>Select Option</option>"; so that first option will be Select Option – Shoaib Konnur Commented Oct 26, 2016 at 5:51

7 Answers 7

try to this...

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

Change this 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>

Change this:

var options = "";

to this:

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

Here is the JSFiddle demo

I think this is useful for you

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

You can just use the append function of jQuery to do that. Also I would suggest providing a value attribute to each option element.

Your code would look like this.

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

You can check out the code here https://jsfiddle/arijitkanrar/pfgwa2n2/

onchange event is easy to get value of user select

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

If you'r working with php then why don't try to make with php script

try this php code -

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