为什么选择索引在此代码中不起作用

Why isn't selectedIndex working in this code?

本文关键字：代码 不起作用 选择 索引 为什么      更新时间：2023-09-26

我有以下代码： 

<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放在循环之外，但它也不起作用。

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

你的 i 从 1 到 31，但选择索引从 0 开始。因此，如果日期是 15，您正在尝试选择索引 15，它实际上是第 16 项，并且您尚未添加它。

例如，此代码工作：

  <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 混合是非常糟糕的做法，随着您了解更多信息，您应该尝试摆脱这一点。

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

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

<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>

我

不确定，但为什么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>

演示

你必须

设置

document.getElementById("option-id").selected = "true";
相关文章：