How to add a year in select tag using javascript
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I need to add the year 2015 to present year in a select tag in html using javascript. I have a code below but it does not display or return the expected value and the select tag is also empty. how can i achieved that?
HTML:
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear">
<option value="0" selected disabled hidden>Select Year</option>
</select>
</div>
</div>
JAVASCRIPT:
function Years() {
var today = new Date(),
yyyy = today.getFullYear()
for (var i = 0; i < 10; i++, yyyy++) {
for (var x = 1; x > i; x++) {
$('#cboYear').append('<option value ="' + x + '">' + yyyy + '</option>')
}
}
}
javascript html
add a comment |
I need to add the year 2015 to present year in a select tag in html using javascript. I have a code below but it does not display or return the expected value and the select tag is also empty. how can i achieved that?
HTML:
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear">
<option value="0" selected disabled hidden>Select Year</option>
</select>
</div>
</div>
JAVASCRIPT:
function Years() {
var today = new Date(),
yyyy = today.getFullYear()
for (var i = 0; i < 10; i++, yyyy++) {
for (var x = 1; x > i; x++) {
$('#cboYear').append('<option value ="' + x + '">' + yyyy + '</option>')
}
}
}
javascript html
add a comment |
I need to add the year 2015 to present year in a select tag in html using javascript. I have a code below but it does not display or return the expected value and the select tag is also empty. how can i achieved that?
HTML:
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear">
<option value="0" selected disabled hidden>Select Year</option>
</select>
</div>
</div>
JAVASCRIPT:
function Years() {
var today = new Date(),
yyyy = today.getFullYear()
for (var i = 0; i < 10; i++, yyyy++) {
for (var x = 1; x > i; x++) {
$('#cboYear').append('<option value ="' + x + '">' + yyyy + '</option>')
}
}
}
javascript html
I need to add the year 2015 to present year in a select tag in html using javascript. I have a code below but it does not display or return the expected value and the select tag is also empty. how can i achieved that?
HTML:
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear">
<option value="0" selected disabled hidden>Select Year</option>
</select>
</div>
</div>
JAVASCRIPT:
function Years() {
var today = new Date(),
yyyy = today.getFullYear()
for (var i = 0; i < 10; i++, yyyy++) {
for (var x = 1; x > i; x++) {
$('#cboYear').append('<option value ="' + x + '">' + yyyy + '</option>')
}
}
}
javascript html
javascript html
asked Jan 3 at 2:49
user10237424
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
.add() method
- get reference to
<select>
tag |.querySelector(selector);
- create an
<option>
tag |.createElement("option");
- add text |
option.text
property - set value |
option.value
property - then add
<option>
to<select>
|select.add(option)
method - repeat process through a
for
loop
Demo
function setOpt(selector, text, value) {
var node = document.querySelector(selector);
var opt = document.createElement("option");
opt.text = text;
opt.value = value;
node.add(opt);
return false;
}
function T(t) {
var now = new Date();
var time;
switch (t.toLowerCase()) {
case 'm':
time = now.getMonth() + 1;
break;
case 'd':
time = now.getDate();
break;
case 'y':
time = now.getFullYear();
break;
default:
break;
}
return time;
}
for (let i = 2015; i <= T('y'); i++) {
setOpt('#cboYear', i, i);
}
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear">
<option value="0" selected disabled hidden>Select Year</option>
</select>
</div>
</div>
1
My pleasure, happy coding.
– zer00ne
Jan 3 at 6:54
add a comment |
Assuming that you are using jquery
in your web app, I made a little modification in your posted code. Here is the code for appending years 2015
to present using loops in javascript.
<script type="text/javascript">
$(document).ready(function(){
Years(); // this will run the function Years() after the DOM (document object model) has been loaded.
});
function Years() {
// get the current date and put in today variable
var today = new Date();
// get the year and put it in yyyy variable
yyyy = today.getFullYear();
// appending from year 2015 up to present in the select tag
for (var index = 2015; index <= yyyy; index++) {
$('#cboYear').append('<option value ="' + index + '">' + index + '</option>')
}
}
</script>
add a comment |
Hope it's help you:
HTML
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear"></select>
</div>
</div>
Script code
function Years() {
var today = new Date();
var yyyy = today.getFullYear();
var content = '<option value="-1">Select Year</option>';
for (var x = 1; x <= 10; x++, yyyy++) {
content += '<option value="' + x + '">' + yyyy + '</option>';
}
$('#cboYear').append(content);
}
Don't forget to add jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015705%2fhow-to-add-a-year-in-select-tag-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
.add() method
- get reference to
<select>
tag |.querySelector(selector);
- create an
<option>
tag |.createElement("option");
- add text |
option.text
property - set value |
option.value
property - then add
<option>
to<select>
|select.add(option)
method - repeat process through a
for
loop
Demo
function setOpt(selector, text, value) {
var node = document.querySelector(selector);
var opt = document.createElement("option");
opt.text = text;
opt.value = value;
node.add(opt);
return false;
}
function T(t) {
var now = new Date();
var time;
switch (t.toLowerCase()) {
case 'm':
time = now.getMonth() + 1;
break;
case 'd':
time = now.getDate();
break;
case 'y':
time = now.getFullYear();
break;
default:
break;
}
return time;
}
for (let i = 2015; i <= T('y'); i++) {
setOpt('#cboYear', i, i);
}
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear">
<option value="0" selected disabled hidden>Select Year</option>
</select>
</div>
</div>
1
My pleasure, happy coding.
– zer00ne
Jan 3 at 6:54
add a comment |
.add() method
- get reference to
<select>
tag |.querySelector(selector);
- create an
<option>
tag |.createElement("option");
- add text |
option.text
property - set value |
option.value
property - then add
<option>
to<select>
|select.add(option)
method - repeat process through a
for
loop
Demo
function setOpt(selector, text, value) {
var node = document.querySelector(selector);
var opt = document.createElement("option");
opt.text = text;
opt.value = value;
node.add(opt);
return false;
}
function T(t) {
var now = new Date();
var time;
switch (t.toLowerCase()) {
case 'm':
time = now.getMonth() + 1;
break;
case 'd':
time = now.getDate();
break;
case 'y':
time = now.getFullYear();
break;
default:
break;
}
return time;
}
for (let i = 2015; i <= T('y'); i++) {
setOpt('#cboYear', i, i);
}
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear">
<option value="0" selected disabled hidden>Select Year</option>
</select>
</div>
</div>
1
My pleasure, happy coding.
– zer00ne
Jan 3 at 6:54
add a comment |
.add() method
- get reference to
<select>
tag |.querySelector(selector);
- create an
<option>
tag |.createElement("option");
- add text |
option.text
property - set value |
option.value
property - then add
<option>
to<select>
|select.add(option)
method - repeat process through a
for
loop
Demo
function setOpt(selector, text, value) {
var node = document.querySelector(selector);
var opt = document.createElement("option");
opt.text = text;
opt.value = value;
node.add(opt);
return false;
}
function T(t) {
var now = new Date();
var time;
switch (t.toLowerCase()) {
case 'm':
time = now.getMonth() + 1;
break;
case 'd':
time = now.getDate();
break;
case 'y':
time = now.getFullYear();
break;
default:
break;
}
return time;
}
for (let i = 2015; i <= T('y'); i++) {
setOpt('#cboYear', i, i);
}
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear">
<option value="0" selected disabled hidden>Select Year</option>
</select>
</div>
</div>
.add() method
- get reference to
<select>
tag |.querySelector(selector);
- create an
<option>
tag |.createElement("option");
- add text |
option.text
property - set value |
option.value
property - then add
<option>
to<select>
|select.add(option)
method - repeat process through a
for
loop
Demo
function setOpt(selector, text, value) {
var node = document.querySelector(selector);
var opt = document.createElement("option");
opt.text = text;
opt.value = value;
node.add(opt);
return false;
}
function T(t) {
var now = new Date();
var time;
switch (t.toLowerCase()) {
case 'm':
time = now.getMonth() + 1;
break;
case 'd':
time = now.getDate();
break;
case 'y':
time = now.getFullYear();
break;
default:
break;
}
return time;
}
for (let i = 2015; i <= T('y'); i++) {
setOpt('#cboYear', i, i);
}
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear">
<option value="0" selected disabled hidden>Select Year</option>
</select>
</div>
</div>
function setOpt(selector, text, value) {
var node = document.querySelector(selector);
var opt = document.createElement("option");
opt.text = text;
opt.value = value;
node.add(opt);
return false;
}
function T(t) {
var now = new Date();
var time;
switch (t.toLowerCase()) {
case 'm':
time = now.getMonth() + 1;
break;
case 'd':
time = now.getDate();
break;
case 'y':
time = now.getFullYear();
break;
default:
break;
}
return time;
}
for (let i = 2015; i <= T('y'); i++) {
setOpt('#cboYear', i, i);
}
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear">
<option value="0" selected disabled hidden>Select Year</option>
</select>
</div>
</div>
function setOpt(selector, text, value) {
var node = document.querySelector(selector);
var opt = document.createElement("option");
opt.text = text;
opt.value = value;
node.add(opt);
return false;
}
function T(t) {
var now = new Date();
var time;
switch (t.toLowerCase()) {
case 'm':
time = now.getMonth() + 1;
break;
case 'd':
time = now.getDate();
break;
case 'y':
time = now.getFullYear();
break;
default:
break;
}
return time;
}
for (let i = 2015; i <= T('y'); i++) {
setOpt('#cboYear', i, i);
}
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear">
<option value="0" selected disabled hidden>Select Year</option>
</select>
</div>
</div>
edited Jan 3 at 3:46
answered Jan 3 at 3:23
zer00nezer00ne
25.4k32547
25.4k32547
1
My pleasure, happy coding.
– zer00ne
Jan 3 at 6:54
add a comment |
1
My pleasure, happy coding.
– zer00ne
Jan 3 at 6:54
1
1
My pleasure, happy coding.
– zer00ne
Jan 3 at 6:54
My pleasure, happy coding.
– zer00ne
Jan 3 at 6:54
add a comment |
Assuming that you are using jquery
in your web app, I made a little modification in your posted code. Here is the code for appending years 2015
to present using loops in javascript.
<script type="text/javascript">
$(document).ready(function(){
Years(); // this will run the function Years() after the DOM (document object model) has been loaded.
});
function Years() {
// get the current date and put in today variable
var today = new Date();
// get the year and put it in yyyy variable
yyyy = today.getFullYear();
// appending from year 2015 up to present in the select tag
for (var index = 2015; index <= yyyy; index++) {
$('#cboYear').append('<option value ="' + index + '">' + index + '</option>')
}
}
</script>
add a comment |
Assuming that you are using jquery
in your web app, I made a little modification in your posted code. Here is the code for appending years 2015
to present using loops in javascript.
<script type="text/javascript">
$(document).ready(function(){
Years(); // this will run the function Years() after the DOM (document object model) has been loaded.
});
function Years() {
// get the current date and put in today variable
var today = new Date();
// get the year and put it in yyyy variable
yyyy = today.getFullYear();
// appending from year 2015 up to present in the select tag
for (var index = 2015; index <= yyyy; index++) {
$('#cboYear').append('<option value ="' + index + '">' + index + '</option>')
}
}
</script>
add a comment |
Assuming that you are using jquery
in your web app, I made a little modification in your posted code. Here is the code for appending years 2015
to present using loops in javascript.
<script type="text/javascript">
$(document).ready(function(){
Years(); // this will run the function Years() after the DOM (document object model) has been loaded.
});
function Years() {
// get the current date and put in today variable
var today = new Date();
// get the year and put it in yyyy variable
yyyy = today.getFullYear();
// appending from year 2015 up to present in the select tag
for (var index = 2015; index <= yyyy; index++) {
$('#cboYear').append('<option value ="' + index + '">' + index + '</option>')
}
}
</script>
Assuming that you are using jquery
in your web app, I made a little modification in your posted code. Here is the code for appending years 2015
to present using loops in javascript.
<script type="text/javascript">
$(document).ready(function(){
Years(); // this will run the function Years() after the DOM (document object model) has been loaded.
});
function Years() {
// get the current date and put in today variable
var today = new Date();
// get the year and put it in yyyy variable
yyyy = today.getFullYear();
// appending from year 2015 up to present in the select tag
for (var index = 2015; index <= yyyy; index++) {
$('#cboYear').append('<option value ="' + index + '">' + index + '</option>')
}
}
</script>
answered Jan 3 at 3:22
MiggyMiggy
726315
726315
add a comment |
add a comment |
Hope it's help you:
HTML
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear"></select>
</div>
</div>
Script code
function Years() {
var today = new Date();
var yyyy = today.getFullYear();
var content = '<option value="-1">Select Year</option>';
for (var x = 1; x <= 10; x++, yyyy++) {
content += '<option value="' + x + '">' + yyyy + '</option>';
}
$('#cboYear').append(content);
}
Don't forget to add jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
add a comment |
Hope it's help you:
HTML
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear"></select>
</div>
</div>
Script code
function Years() {
var today = new Date();
var yyyy = today.getFullYear();
var content = '<option value="-1">Select Year</option>';
for (var x = 1; x <= 10; x++, yyyy++) {
content += '<option value="' + x + '">' + yyyy + '</option>';
}
$('#cboYear').append(content);
}
Don't forget to add jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
add a comment |
Hope it's help you:
HTML
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear"></select>
</div>
</div>
Script code
function Years() {
var today = new Date();
var yyyy = today.getFullYear();
var content = '<option value="-1">Select Year</option>';
for (var x = 1; x <= 10; x++, yyyy++) {
content += '<option value="' + x + '">' + yyyy + '</option>';
}
$('#cboYear').append(content);
}
Don't forget to add jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Hope it's help you:
HTML
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear"></select>
</div>
</div>
Script code
function Years() {
var today = new Date();
var yyyy = today.getFullYear();
var content = '<option value="-1">Select Year</option>';
for (var x = 1; x <= 10; x++, yyyy++) {
content += '<option value="' + x + '">' + yyyy + '</option>';
}
$('#cboYear').append(content);
}
Don't forget to add jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
answered Jan 3 at 4:04


Majedur RahamanMajedur Rahaman
443311
443311
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015705%2fhow-to-add-a-year-in-select-tag-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown