HTML 使用 Javascript 的下拉菜单

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

您可以在 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 
  }));
}

Fiddle

Answer 4

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

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

在此工作 fiddle 中，通过使用您的 HTML 和 javascript，我们生成从 1986 年 INCLUDED 到 2015 年 INCLUDED 的日期，在您之前的脚本中您排除了这些日期。

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

Fiddle:

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>

HTML 使用 Javascript 的下拉菜单

HTML drop down menu using Javascript

html

javascript

loops