Read cookies returns undefined
<p>Here is my situation.
I have a dropdown to select country on home.</p>

<p>If there is no cookie I set cookie default to "US", Then user open a link in new tab and goes to checkout page, I filter other countries and show only that selected country on dropdown select, everything is fine but when on first tab it changes country to DE on second tab Cookie is DE but the country is still US.</p>

<p>There are two options, </p>

<pre><code>&lt;select id="country"&gt;
    &lt;option&gt;Select Country&lt;/option&gt;
    &lt;option value="US"&gt;Select Country&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>What I want to do is </p>

<pre><code>function readCookie(k){return(document.cookie.match('(^|; )'+k+'=([^;]*)')||0)[2]}  
</code></pre>

<p>or any other function to read cookies like some described here <a href="http://stackoverflow.com/questions/5639346/shortest-function-for-reading-a-cookie-in-javascript">Shortest function for reading a cookie in JavaScript</a>   </p>

<pre><code>document.getElementById('country').onchange = function () { 
    this.options.length = 0;
    this.options[1] = new Option(readCookie('country'),readCookie('country'));
    this.options[1].setAttribute("selected","selected");
}
</code></pre>

<p>They return undefined but cookie is there when I inspect with profile. Basically, I just want to renew option based on cookie </p>

<p>when I do </p>

<pre><code>document.getElementById('country').onchange = function () { 

    alert(readCookie('country'); //returns undefined
}
</code></pre>
