使用Javascript的HTML下拉菜单

Question

我试图制作一个HTML下拉菜单，使用JavaScript，该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

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

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。 这将使您的代码更易于阅读（即避免在select代码中插入script元素，并允许您更新内容运行时）：

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 
  }));
}

小提琴

Answer 4

我的拙见，您的方法可能会更好。

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

在此工作中，通过使用HTML和javascript，我们生成了从1986 INCLUDED到2015 INCLUDED的日期，在您以前的脚本中，您不包括这些日期。

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

小提琴：

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

<-如果要运行以下代码段，则不需要。。但是，如果要添加一些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>