CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Nithya
Nithya

Reputation: 1121

How to display select option from dynamic data drop down list

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

Upvotes: 4

Views: 11559

Answers (7)

prasanth
prasanth

Reputation: 22510

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>

Upvotes: 1

Pravin Vavadiya
Pravin Vavadiya

Reputation: 3207

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>

Upvotes: 3

RJParikh
RJParikh

Reputation: 4166

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>

Upvotes: 2

Arijit Kanrar
Arijit Kanrar

Reputation: 450

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.net/arijitkanrar/pfgwa2n2/

Upvotes: 1

Hitesh
Hitesh

Reputation: 372

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>

Upvotes: 1

Ahs N
Ahs N

Reputation: 8396

Change this:

var options = "";

to this:

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

Here is the JSFiddle demo

Upvotes: 1

Rohit Suthar
Rohit Suthar

Reputation: 3628

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

Upvotes: 0

Related Questions