local storage - jQuery not reading selected option after refresh -

morning,

i have select box looks this:

<select id="companyselect" name="companyselect"> <option value="-1">please choose company</option> <option value="co1">co1</option> <option value="co2">co2</option> <option value="co3">co3</option> <option value="co4">co4</option> </select> 

all options, apart first, generated using jquery (from localstorage) , appear should.

i have jquery function triggered on 'change' event:

$(document).on('change', '#companyselect', function(e){     thecomp = $('#companyselect').val();     alert(thecomp); }); 

this works fine.

however, when reload page, options generated expected 'change' event not working required. no matter option selected, $('#companyselect').val(); returned first option.

i have checked dom see if there element same id, no. have tried returning text of option, , returns text of first option.

all suggestions welcome.

here how use localstorage selected value after use refreshes page using jquery using localstorage,

$(document).on('change', '#companyselect', function(e){ var thecomp = $('#companyselect').val(); localstorage.thecomp=thecomp; alert(thecomp); });      if(localstorage.getitem('thecomp')){      alert(localstorage.thecomp);        $("#companyselect").val(localstorage.thecomp);     } 

jsfiddle demo