Set Selectbox value after refresh with Jquery / Javascript?

Question

I'm have a problem with this code not working when it probably should be:

<script language = "javascript">
$(document).ready(function() {

$('#dept').change(
        function() {

            var datas = $(this).val();
            $.cookie("deptdata", datas);
            var urlDept = 'catch.cfm?dept=' + datas;
            $.ajax({
            type: 'post',
            url: urlDept,
            success: function(){
                 window.location.replace('');
                 var datasR = $.cookie("deptdata");
                 $("select#dept").val(datasR);
            }
             });
}); 

});

</script>

I have these included:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript" src="a_scripts.js"></script>

Form:

<form>
    <select name="DeptCode" id = "dept">
    <option value="NONE">Choose a Department
    <cfoutput query="getDepartments">
    <option value="#DeptCode#">#DeptName#</option>
    </cfoutput>
    </select>
    </form>
<cfoutput>#session.deptcode#</cfoutput>

What should be happening is: when a department is selected the page changes the session value via ajax (this works) to the one selected. However, I have to refresh the page for the query to work for another part of the page. So I wanted to cache the value of the select and reassign it to be selected after the page refreshes. (So it keeps the item selected).

Answer 1

You need to put the code to read the cookie outside the function

$(document).ready(function() { 

  var datasS = $.cookie("deptdata"); 
  $("select#dept").val(datasS); 

rest of your code here...

Answer 2

Your window.location.replace(''); reloads the page so the select box is redrawn and its contents are reset..