How do I keep the value of a select option to be dynamic?

Question

I want to keep the value of the select option to be 10 years in total. For example, if you see now the select option is showing from 2010-2019. When 2020 comes I want 2010 to be removed and 2020 to be added, and likewise, it must always remain 10 years period in the select option.

Can someone help me with this please?

Regards, Bill

<select>
<option>2019</option>
<option>2018</option>
<option>2017</option>
<option>2016</option>
<option>2015</option>
<option>2014</option>
<option>2013</option>
<option>2012</option>
<option>2011</option>
<option>2010</option>
</select>

In just HTML, this is not possible without uploading the changes once a year. In JS, This should help: https://stackoverflow.com/questions/8674618/adding-options-to-select-with-javascript — Doug, Mar 29 '19 at 12:29
@BillNathan better use server dates and time than depending on client side. — Shoyeb Sheikh, Mar 29 '19 at 13:05
this is definitely better done with server side code rather than client side - they could set any date on their machine and then they would have a range of dates that may be totally wrong — Pete, Mar 29 '19 at 13:13

score 0 · Answer 1 · answered Mar 29 '19 at 12:38

0

You can use the current year to generate the options dynamically using loop:

var year = new Date().getFullYear();
for(var y = year; y > year - 10; y--){
  $('#years').append($('<option>', {
      value: y,
      text: y
  }));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="years"></select>

answered Mar 29 '19 at 12:38

Mamun

66,969
9
47
59

Thanks for your help :) How do you verify it's working? – BillNathan Mar 29 '19 at 12:41
1

@BillNathan, you can use static value like `year=2020`; – Mamun Mar 29 '19 at 12:43
1

@BillNathan, when the year `2020` will come, `new Date().getFullYear()` will give you `2020`. So you can test by setting the year value to `2020`.... – Mamun Mar 29 '19 at 12:51
As people suggested client-side validation isn't really powerful. Should I go for the server side in this case? – BillNathan Mar 29 '19 at 13:34
@BillNathan, you have to generate the years dynamically, whether it is on the server or client and generate the drop down in the client. Personally, I don't think it matters much in this case. – Mamun Mar 29 '19 at 13:40
I think there are two benefits for server side. 1. Validation becomes stronger even if the client disables the JS on the browser it can't bypass. 2. The client can not change the clock and tweak the select option since it's the server clocks that matters now. Your thoughts? – BillNathan Mar 29 '19 at 14:07
1

@BillNathan, I can not think of client disabling the JS. If they do so, I believe there must be some other JS used some where in the application, they are ultimately going to fail:) – Mamun Mar 29 '19 at 14:13

score 0 · Answer 2 · answered Mar 29 '19 at 13:03

Use below link for your desired output. Input box and button is only for testing purpose.

var currentYear = new Date().getFullYear();
for (var index = currentYear; index > currentYear - 10; index--) {
  $('#yearDropdown').append($('<option>', {
    value: index,
    text: index
  }));
}

//For testing only
function getInput() {
  var userInput = $('#inputYear').val();
  var tempYear = userInput;
  $('#yearDropdown option').remove();
  for (var i = tempYear; i > tempYear - 10; i--) {
    $('#yearDropdown').append($('<option>', {
      value: i,
      text: i
    }));
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Insert Year <input id="inputYear" type="text" /> <button onClick="getInput()">Click</button>
<br/>
<br/> Desired Output

<select id="yearDropdown"></select>

How do I keep the value of a select option to be dynamic?

2 Answers2