title: jQuery cookies setting select drop down value after page refresh
body: <p>In all honesty my brain is rather fried after getting this far today.</p>
  
  <p>I am trying to save the state of multiple select drop downs on page using this plugin:</p>
  
  <p><a href="http://plugins.jquery.com/project/cookies" rel="nofollow noreferrer">http://plugins.jquery.com/project/cookies</a></p>
  
  <p>I am using this jQuery to set cookies for the different title drop downs based on their ID:</p>
  
  <pre><code>$(document).ready(function() {
  
  // hide 'Other' inputs to start
  $('.jOther').hide();
  
  // event listener on all select drop downs with class of jTitle 
  $(".jTitle").change(function(){
  
      //set the select value
      var val = $(this).val();
  
      if(val != "Other") {
          //$(this).nextAll('.jOther').hide();
          $(this).parent().find(".jOther").hide();
      } else {
          //$(this).nextAll('.jOther').show();
          $(this).parent().find(".jOther").show();
      }
  
      // Sets a cookie with named after the title field's ID attribute 
      $(this).cookify();
  
  });
  
  $(".jTitle").each(function(){
  
      // get the id of each Title select drop down
      var $titleId = $(this).attr('id');
  
      // get the value of the cookie for each cookie created above in $(this).cookify()
      var $cookieValue = $.cookies.get($titleId);
  
      // if value is 'Other' make sure it is shown on page refresh
      if ($cookieValue == 'Other') {
  
          // Show the other input
          $(this).parent().find(".jOther").show();
  
          // set select value to 'Other'
          $(this).val('Other');
  
      } else {
  
          // set to whatever is in the cookie
          $(this).val($cookieValue);
  
      }                       
  
  }); 
  </code></pre>
  
  <p>});</p>
  
  <p>What is happening is that when no cookies are set the select drop down is displaying a blank option when i want it to default to 'Please select'.</p>
  
  <p>Sample HTML that i am using:</p>
  
  <pre><code>&lt;td&gt;
  &lt;select id="titleDepend1" class="inlineSpace jTitle"&gt;
      &lt;option value="Please select"&gt;Please select...&lt;/option&gt;
      &lt;option value="Mr"&gt;Mr&lt;/option&gt;
      &lt;option value="Mrs"&gt;Mrs&lt;/option&gt;
      &lt;option value="Ms"&gt;Ms&lt;/option&gt;
      &lt;option value="Miss"&gt;Miss&lt;/option&gt;
      &lt;option value="Dr"&gt;Dr&lt;/option&gt;
      &lt;option value="Other"&gt;Other&lt;/option&gt;
  &lt;/select&gt;
  &lt;label for="otherDepend1" class="inlineSpace jOther"&gt;Other&lt;/label&gt;
  &lt;input type="text" class="text jOther" name="otherDepend1" id="otherDepend1" maxlength="6" /&gt;
  </code></pre>
  
  <p></p>
  
  <p>So if it is the first time the user is on page and they have not clicked any drop downs the first value will be null rather than 'Please select'.</p>