How do I change the “selected” attribute on an option tag with javascript

Question

I'm creating a web form for an online order. I want to make the select box default to the current month using javaScript but it doesn't seem to be working for me and I'm not sure why. I am new to javascript but I thought I figured this out. Am I missing something or mis-interpreting something? Here is the HTML:

<label for="orderMonth">Month</label>
            <select name="month" id="orderMonth" onchange="setselect()">
                <option value="01" id="m0">January</option>
                <option value="02" id="m1">February</option>
                <option value="03" id="m2">March</option>
                <option value="04" id="m3">Aprl</option>
                <option value="05" id="m4">May</option>
                <option value="06" id="m5">June</option>
                <option value="07" id="m6">July</option>
                <option value="08" id="m7">August</option>
                <option value="09" id="m8">September</option>
                <option value="10" id="m9">October</option>
                <option value="11" id="m10">November</option>
                <option value="12" id="m11">December</option>
            </select>

And here is the script the first way I tried it:

<script>
        var month = getMonth();
        var opt = document.getElementById("m"+month);
        opt.setAttribute("selected");
    </script>

and the second way I tried it:

<script>
        var month = getMonth();
        if (month == 0) {
            document.getElementById("m0").selected = true;}
        else if (month == 1) {
            document.getElementById("m1").selected = true;}
        else if (month == 2) {
            document.getElementById("m2").selected = true;}
        else if (month == 3) {
            document.getElementById("m3").selected = true;}
        else if (month == 4) {
            document.getElementById("m4").selected = true;}
        else if (month == 5) {
            document.getElementById("m5").selected = true;}
        else if (month == 6) {
            document.getElementById("m6").selected = true;}
        else if (month == 7) {
            document.getElementById("m7").selected = true;}
        else if (month == 8) {
            document.getElementById("m8").selected = true;}
        else if (month == 9) {
            document.getElementById("m9").selected = true;}
        else if (month == 10) {
            document.getElementById("m10").selected = true;}
        else if(month == 11) {
            document.getElementById("m11").selected = true;}
    </script>

Thoughts anyone?

Answer 1

You must create a new Date obj to take the month.Look the code below:

 var today=new Date(); var month = today.getMonth(); if (month == 0) { document.getElementById("m0").selected = true;} else if (month == 1) { document.getElementById("m1").selected = true;} else if (month == 2) { document.getElementById("m2").selected = true;} else if (month == 3) { document.getElementById("m3").selected = true;} else if (month == 4) { document.getElementById("m4").selected = true;} else if (month == 5) { document.getElementById("m5").selected = true;} else if (month == 6) { document.getElementById("m6").selected = true;} else if (month == 7) { document.getElementById("m7").selected = true;} else if (month == 8) { document.getElementById("m8").selected = true;} else if (month == 9) { document.getElementById("m9").selected = true;} else if (month == 10) { document.getElementById("m10").selected = true;} else if(month == 11) { document.getElementById("m11").selected = true;} 

Answer 2

Your code works if you change:

var month = getMonth();

to

var month = new Date().getMonth();

However, since the month number matches the option index, you can simply set the select's selectedIndex to the month number:

 window.onload = function() { document.getElementById('orderMonth').selectedIndex = new Date().getMonth(); } 

 <label for="orderMonth">Month</label> <select name="month" id="orderMonth" onchange="setselect()"> <option value="01" id="m0">January</option> <option value="02" id="m1">February</option> <option value="03" id="m2">March</option> <option value="04" id="m3">Aprl</option> <option value="05" id="m4">May</option> <option value="06" id="m5">June</option> <option value="07" id="m6">July</option> <option value="08" id="m7">August</option> <option value="09" id="m8">September</option> <option value="10" id="m9">October</option> <option value="11" id="m10">November</option> <option value="12" id="m11">December</option> </select> 

You could also do:

document.getElementById('orderMonth').options[new Date().getMonth()].selected = true;