title: Javascript: Cookies, Select Boxes, and 'document.getElementById' not working in Internet Explorer
body: <p>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...</p>
  
  <p><strong>...but not in IE.</strong> 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.</p>
  
  <pre><code>function setSol() {
      document.cookie= "solCookie=" + document.getElementById('sol').selectedIndex;
      }
  function setPro() {
      document.cookie= "proCookie=" + document.getElementById('pro').selectedIndex;
      }
  </code></pre>
  
  <p>Chrome 13 is happy enough with it, Firefox 5 is willing to play nice, but nope! IE9 will have none of it!</p>
  
  <p><img src="https://i.stack.imgur.com/MM681.png" alt="ie hates cookies"></p>
  
  <p><a href="http://imgur.com/a/yOrGd" rel="nofollow noreferrer">http://imgur.com/a/yOrGd</a> (Album of Other browser examples for Cookies)</p>
  
  <p><strong><em>^ This is the problem. ^</em></strong></p>
  
  <p>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!</p>
  
  <p>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p>
  
  <p><strong>The workflow, more in-depth:</strong>
  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.</p>
  
  <pre><code>&lt;select name="sol" id="sol" size="1" style="margin-bottom: 0px;" onchange="setSol();populate(this)"&gt; 
      &lt;option value="Choose a Solution"&gt;Choose a solution...&lt;/option&gt;
      &lt;option value="Option One"&gt;Option One&lt;/option&gt;
      &lt;option value="Option Two"&gt;Option Two&lt;/option&gt;
      &lt;option value="Option Three"&gt;Option Three&lt;/option&gt;
  &lt;/select&gt; 
  &lt;select name="pro" id="pro" size="1" style="width: 323px; margin-bottom: 0px;" onchange="setPro();javascript:_SFSUBMIT_"&gt; 
  &lt;/select&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <pre><code>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;
          }
      }
  </code></pre>