如何保持选择选项的值是动态的？ [复制]答案

【问题标题】：How do I keep the value of a select option to be dynamic? [duplicate]如何保持选择选项的值是动态的？ [复制]
【发布时间】：2019-03-29 12:27:54
【问题描述】：

我想将选择选项的值保持为 10 年。例如，如果您现在看到选择选项显示的是 2010-2019 年。当 2020 年到来时，我希望删除 2010 年并添加 2020 年，同样，它必须始终在选择选项中保持 10 年。

有人可以帮我解决这个问题吗？

问候，比尔

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

【问题讨论】：

仅在 HTML 中，如果不每年上传一次更改，这是不可能的。在 JS 中，这应该会有所帮助：stackoverflow.com/questions/8674618/…
@BillNathan 比依赖客户端更好地使用服务器日期和时间。
这绝对是使用服务器端代码而不是客户端更好 - 他们可以在他们的机器上设置任何日期，然后他们会有一个可能完全错误的日期范围

标签： javascript jquery html

【解决方案1】：

您可以使用当前年份通过循环动态生成选项：

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>

【讨论】：

感谢您的帮助 :) 您如何验证它的工作原理？
@BillNathan，你可以使用像year=2020这样的静态值；
@BillNathan，当2020 到来的那一年，new Date().getFullYear() 会给你2020。因此，您可以通过将年份值设置为 2020.... 来进行测试
正如人们所建议的那样，客户端验证并不是很强大。在这种情况下我应该去服务器端吗？
@BillNathan，我想不出客户端禁用 JS。如果他们这样做了，我相信在应用程序的某个地方一定有其他一些 JS 使用，他们最终会失败:)

【解决方案2】：

使用以下链接获取您想要的输出。输入框和按钮仅用于测试目的。

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>

【讨论】：