动态添加选项以选择select标记

Dynamically add options to select select tag

本文关键字:select 标记 选择 添加 选项 动态      更新时间:2023-09-26

我正在尝试写一个选择下拉列表,其中动态填充了选项,选项是年份,例如2010、2011、2012

但随着来年的到来,网页应该在当前年份的下拉列表中添加新条目。今年的第一个条目是2010年固定的,但最后一个条目是动态的,取决于当前年份。。

有什么帮助吗?

类似的东西?

var currentYear = new Date().getFullYear();
for (var i = 2010; i <= currentYear; i++) {
  var selected = '';
  if (i == currentYear)
    selected = 'selected';
    
  $("#years").append("<option value='" + i + "'" + selected + ">" + i + "</option>")
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='years' />

这是一种方法。。小提琴

 $("select").append("<option value='added'>added</option>");

根据您的逻辑追加选项。

这里是jsfiddle链接(没有jquery(。

<form>
<select id="mySelect">
</select>
</form>

Javascript:

var x = document.getElementById("mySelect");
var to = new Date().getFullYear();
var option;
for (var i = 2010; i <= to; i++)
{
    option = document.createElement("option");
    option.text = i;
    x.add(option);
}

只需使用实际日期:

 var startYear = 1950;
 var currentYear = new Date().getFullYear();

然后你可以生成你的选择选项

var select = '<select>';
for (var i = startYear; i <= currentYear; i++){
     select += '<option>'+i+'</option>';
}
select += </select>;
var date = new Date();
var year = date.getFullYear(); 
for (var i=2010;i<year+1;i++) {
   $('#MySelect').append('<option value="'+i+'">'+i+'</option>')
}

FiDDLE

为什么不从中选择当前年份的子项2010(因为它是一个修复结束(,然后从2010开始向上计数,并从结果中添加金额?这就是我最初的想法。

编辑:如果您在每次加载页面时都填充下拉列表,那么您总是使用根据子动作计算的金额来填充该数组。我不明白这个问题。