Question

我试图制作一个html下拉菜单，使用JavaScript使用循环从特定年份开始插入选项并在当前年份停止。但是我没有成功，下拉菜单出现但是它没有任何内容

  <script language="JavaScript" type="text/javascript">
         function Year()
         {
             var Year = 1986
             var CurrentYear = new Date().getFullYear()

             while( Year < CurrentYear){
             {
                 Year++;
                 document.write("<option>" + Year + "</option>");
             }

         }

这是HTML

  <select id='ddYear'>
      <option selected disabled hidden label="Select An Option">

   <script language="JavaScript" type="text/javascript">
           Year();
   </script>

   </select>

Answer 1

您可以在循环中添加以下代码。

Year++;
var select = document.getElementById("ddYear");
var option = document.createElement('option');
option.text = option.value = Year;
select.add(option, 0);

Answer 2

你有一个额外的大括号。我还建议更好的命名：

     function buildOptions() {

         var year = 1986;
         var currentYear = new Date().getFullYear();

         while( year < currentYear) {
             year++;
             document.write("<option>" + year + "</option>");
         }

     }

然后是HTML：

<select id='ddYear'>
   <option selected disabled hidden label="Select An Option">

   <script language="JavaScript" type="text/javascript">
         buildOptions();
   </script>

</select>

Answer 3

考虑使用jQuery而不是纯javascript。它将使您的代码更容易阅读（即避免在script代码中插入select元素，并允许您更新内容运行时）：

<强> HTML

<select id='ddYear'>
    <option selected disabled hidden label="Select An Option"></option>
</select>

<强> Jquery的

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

for(var year=startYear; year<currentYear; year++)
{
  $('#ddYear').append($('<option/>', { 
     value: year,
     text : year 
  }));
}

Fiddle

Answer 4

我的拙见可以让你的方法更好一点。

首先，您可以避免在html中使用脚本标记来调用函数，因为这可以直接在您的脚本中完成。

在这个工作小提琴中，通过获取HTML和javascript，我们生成的日期从1986年开始包含到2015年包含，在您之前的脚本中，您排除了这些日期。

我还为您添加了一个更改事件监听器以供将来使用，因为您可能想知道何时更改选择下拉列表。

小提琴：

http://jsfiddle.net/briosheje/0Luq0fxf/

＆lt; - 如果您想要运行以下代码段，则不需要..但是如果您想添加一些css / html以便进一步立即测试..

HTML：

<select id='ddYear'>
    <option selected disabled hidden label="Select An Option">
</select>

使用Javascript：

var ddYear = document.getElementById('ddYear');

var y = 1986;
var currYear = new Date().getFullYear();

while ( y <= currYear ) {
    var newOption = document.createElement('option');
    newOption.text = newOption.value = y;
    y++;
    ddYear.add(newOption);
}

ddYear.addEventListener('change',function() {
   alert(this.value);
});

段：

var ddYear = document.getElementById('ddYear');

var y = 1986;
var currYear = new Date().getFullYear();

while ( y <= currYear ) {
    var newOption = document.createElement('option');
    newOption.text = newOption.value = y;
    y++;
    ddYear.add(newOption);
}

ddYear.addEventListener('change',function() {
   alert(this.value);
});

<select id='ddYear'>
    <option selected disabled hidden label="Select An Option">
</select>

使用Javascript的HTML下拉菜单

4 个答案: