Question

我有以下代码：

<html>
    <head>

   </head>
  <body>
     <select name="" id="dia">
        <script>
         var d = new Date();
         var selector = document.getElementById('dia');

         for(var i = 1; i < 32; i++){
             var toprint = "<option>"+i+"</option>";
             document.write(toprint);
             if(i==d.getDate()){  
                 selector.selectedIndex = i
             }
         }

         </script>
     </select>
        <select name="" id="mes"></select>
        <select name="" id="anyo"></select>

   </body>
</html>

select元素按预期填充选项，但索引未正确设置。我已经分开尝试了每个组件，但我不知道它为什么不起作用。

selector.selectedIndex在我在控制台中使用时可以正常工作
i显然是一个有效的数字，因为它在循环中迭代。
Javascript console不会显示任何错误或异常。所以我认为没有错别字。
在if内放置提醒，确实有效。所以我假设代码正在输入if子句。
我认为可能在每次写入后都会重写索引，但我尝试将selectedIndex置于循环之外，但它也无法正常工作。

所以...我错过了什么？我真的没有想法。

Answer 1

你的i从1变为31，但是selectIndex从0开始。所以如果当天是15，那么你正在尝试选择第15项的第15项，而你还没有添加它。

例如，此代码有效：

  <select name="" id="dia">
    <script>
      var d = new Date();

      for (var i = 1; i < 32; i++) {
        var toprint = "<option>" + i + "</option>";
        document.write(toprint);
      }

      var selector = document.getElementById('dia');
      selector.selectedIndex = d.getDate() - 1
    </script>
  </select>
  <select name="" id="mes"></select>
  <select name="" id="anyo"></select>

或者，只需最少的更改，您的代码就可以重写为：

  <select name="" id="dia">
    <script>
      var d = new Date();
      var selector = document.getElementById('dia');

      for (var i = 0; i < 31; i++) {
        var day = i + 1;
        var toprint = "<option>" + day + "</option>";
        document.write(toprint);
        if (day == d.getDate()) {
          selector.selectedIndex = i
        }
      }
    </script>
  </select>
  <select name="" id="mes"></select>
  <select name="" id="anyo"></select>

请注意，将JavaScript代码与HTML混合是一种非常糟糕的做法，您应该在了解更多信息时尝试远离这一点。

Answer 2

因为当您设置时，当前i的选项不存在。

在循环之后设置它，并减去1，以便获得正确的基于零的索引。

＆＃13;

<select name="" id="dia">
   <script>
    var d = new Date();
    var selector = document.getElementById('dia');
    
    for(var i = 1;i<32;i++){
        var toprint = "<option>"+i+"</option>";
        document.write(toprint);
    }
    selector.selectedIndex = d.getDate() - 1;
    
    </script>
</select>
<select name="" id="mes"></select>
<select name="" id="anyo"></select>

＆＃13;

Answer 3

我不确定，但为什么if声明甚至是必要的呢？

<select name="" id="dia">
    <script>
        var d = new Date();
        var selector = document.getElementById('dia');

        for (var i = 1; i < 32; i++) {
            var toprint = "<option>" + i + "</option>";
            document.write(toprint);
        }

        selector.selectedIndex = d.getDate();
    </script>
</select>

Demo

Answer 4

你必须设置

document.getElementById("option-id").selected = "true";

为什么没有selectIndex在此代码中工作？

4 个答案: