如何使选择选项的值保持动态?

时间:2019-03-29 12:27:54

标签: javascript jquery html

我希望选择选项的价值总计为10年。例如,如果您现在看到的是2010-2019年的选择选项。到2020年时,我希望删除2010年并添加2020年,同样,它必须始终在select选项中保留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>

2 个答案:

答案 0 :(得分:0)

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

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>

答案 1 :(得分:0)

使用下面的链接获取所需的输出。 输入框和按钮仅用于测试目的。

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>