Javascript: Cookies, Select Boxes, and 'document.getElementById' not working in Internet Explorer

Question

After lots of trial and error, I've managed to have multiple drop-down boxes save the value of the user selection into a cookie and have the user selections preselected from the cookies...

...but not in IE. My cookie-setting functions are simple enough. I have two select boxes with names and IDs 'sol' and 'pro'. I call the below functions when the appropriate select-box onChanges, and (ideally) a solCookie and proCookie is made with a single integer representing the index of whatever the user selected.

function setSol() {
    document.cookie= "solCookie=" + document.getElementById('sol').selectedIndex;
    }
function setPro() {
    document.cookie= "proCookie=" + document.getElementById('pro').selectedIndex;
    }

Chrome 13 is happy enough with it, Firefox 5 is willing to play nice, but nope! IE9 will have none of it!

http://imgur.com/a/yOrGd (Album of Other browser examples for Cookies)

^ This is the problem. ^

So it seems that IE is saving the entire line of code into the cookie. How can I fix this? Keep in mind, I'm fairly new at javascript and coding in general. Much appreciated!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The workflow, more in-depth: The sol(ution) and pro(duct) select boxes are ultimately filters. Various products are categorized into solutions, akin to a State-to-City relationship. Here are the select boxes.

<select name="sol" id="sol" size="1" style="margin-bottom: 0px;" onchange="setSol();populate(this)"> 
    <option value="Choose a Solution">Choose a solution...</option>
    <option value="Option One">Option One</option>
    <option value="Option Two">Option Two</option>
    <option value="Option Three">Option Three</option>
</select> 
<select name="pro" id="pro" size="1" style="width: 323px; margin-bottom: 0px;" onchange="setPro();javascript:_SFSUBMIT_"> 
</select>

As you can see, once a user selects an option in 'sol', it calls setSol(), which sets cookie 'solCookie', and then calls populate() (not listed), which fills 'pro' with other options. Once a user chooses an option in that, a proCookie is stored via setPro(), the form is submitted, and the page is refreshed.

Here is my cookie-retrieval/select-box selector function. After the page is refreshed, this function, along with a practically identical function 'getSol()', runs onLoad, filling the select boxes with whatever was in the cookie.

function getPro(cookie_name) {
    if (document.cookie); {
        index = document.cookie.indexOf("proCookie");
        if (index != -1) {
            namestart = (document.cookie.indexOf("=", index) + 1);
            nameend = document.cookie.indexOf(";", index);
            if (nameend == -1) {
                nameend = document.cookie.length;
                }
            var selPro = document.cookie.substring(namestart,nameend);
            selPro = parseInt(selPro);
            }
        document.getElementById('pro').options[selPro].selected = true;
        }
    }

Answer 1

Try setting an expiration on your cookie. I've never seen cookie setting code that doesn't at least pass it an empty string.

function setSol() {
    var date  = new Date();
    var tomorrow = new Date(date.getTime() + 24*60*60*1000);
    document.cookie= "solCookie=" + document.getElementById('sol').selectedIndex + "; expires=" + tomorrow.toUTCString();
}