Why isn't selectedIndex working in this code?

Question

Why isn't selectedIndex working in this code?

2.8k views Asked by kace91 At 29 November 2014 at 00:02

I have the following code:

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

The select element is filled by options as expected, but the index is not properly set. I've tried every component in separate, and I don't get why it isn't working.:

selector.selectedIndex works when I use it in console
i is obviously a valid number since it's iterating in the loop.
The Javascript console doesn't show any error or exception. So I assume there are no typos.
Placing an alert inside the if, it does work. So I assume the code is entering the if clause.
I thought that maybe the index was being rewritten after every write, but I've tried placing selectedIndex outside the loop and it doesn't work either.

So... What am I missing?? I'm really out of ideas.

Original Q&A

There are 4 answers

six fingered man On 29 November 2014 at 00:12

Because the option for the current i doesn't exist when you're setting it.

Set it after the loop, and subtract 1 so that you get the right zero based index.

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

isherwood On 29 November 2014 at 00:13

I'm not sure, but why is the if statement even necessary?

<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

newday On 29 November 2014 at 00:37

You have to set

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

**Mihai Dinculescu** · Accepted Answer · 2014-11-29 00:11:49

Your i goes from 1 to 31, but selectIndex starts at 0. So if the day is 15, you're trying to select index 15 which is item 16th actually and you haven't added it yet.

For example this code works:

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

Or, with minimum changes, your code can be rewritten as:

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

Please note that mixing JavaScript code with HTML is very bad practice and you should try to move away from this as you learn more.

TechQA.

Why isn't selectedIndex working in this code?

There are 4 answers

Related Questions in JAVASCRIPT

Related Questions in SELECTEDINDEX

Popular Questions

Popular Tags

Trending Questions