title: How to change Selected Option to specific value on close of Overlay window?
body: <p>How would I alter the JS functions below so that the option selected on the dropdown menu reverts back to 'Australia' upon closing the overlay window. </p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(document).ready(function(){
      // show popup when selecting a country from the drop-down
      var money = 0;
      $(".target").change(function () {
      var optionSelected = $("option:selected", this);
      money = optionSelected.attr("data-price");
      $("input[name='shipping']").val(money); 
      $('.overlay-bg').show().css({'height' : docHeight}); 
      $('.overlay-content').css({'top': scrollTop+20+'px'});
      });
  
      // hide popup when user clicks on close button
      $('.close-btn').click(function(){
          $('.overlay-bg').hide();
           // hide the overlay
      });
  
      // hides the popup if user clicks anywhere outside the container
      $('.overlay-bg').click(function(){
          $('.overlay-bg').hide();
      })
      // prevents the overlay from closing if user clicks inside the popup overlay
      $('.overlay-content.').click(function(e) {
      e.preventDefault();         
      var $this = $(this);
      var horizontalPadding = 30;
      var verticalPadding = 30;
  
      var iframe_popup = $('&lt;iframe id="externalSite" class="externalSite" frameborder="0" allowtransparency="true" src="' + this.href + '" /&gt;');
      iframe_popup.dialog(
      {
          title: ($this.attr('title')) ? $this.attr('title') : '',
          autoOpen: true,
          width: 600,
          height: 450,
          modal: true,
          autoResize: true,
          overlay: {
              opacity: 0.5,
              background: "black"
          }
      }).width(600 - horizontalPadding).height(450 - verticalPadding);
  });
  
  });
  </code></pre>
  
  <p><strong>HTML Drop Down Menu</strong></p>
  
  <pre><code>&lt;div class="main-content"&gt;
  &lt;select id="customer_country" name="customer_country"
                      class="validate[required] input_styling target"
                      style="background: #FFFFFF;"&gt;
                  &lt;option value=""&gt;Please Select a Country&lt;/option&gt;
                  &lt;option value="Afghanistan" data-price="29.95"&gt;Afghanistan&lt;/option&gt;
                  &lt;option value="Åland Islands" data-price="29.95"&gt;Åland Islands&lt;/option&gt;
                  &lt;option value="Albania" data-price="29.95"&gt;Albania&lt;/option&gt;
                  &lt;option value="Algeria" data-price="29.95"&gt;Algeria&lt;/option&gt;
                  &lt;option value="American Samoa" data-price="29.95"&gt;American Samoa&lt;/option&gt;
                  &lt;option value="Andorra" data-price="14.95"&gt;Andorra&lt;/option&gt;
                  &lt;option value="Angola" data-price="29.95"&gt;Angola&lt;/option&gt;
                  &lt;option value="Anguilla" data-price="29.95"&gt;Anguilla&lt;/option&gt;
                  &lt;option value="Antarctica" data-price="29.95"&gt;Antarctica&lt;/option&gt;
                  &lt;option value="Antigua and Barbuda" data-price="29.95"&gt;Antigua and Barbuda&lt;/option&gt;
                  &lt;option value="Argentina" data-price="19.95"&gt;Argentina&lt;/option&gt;
                  &lt;option value="Armenia" data-price="29.95"&gt;Armenia&lt;/option&gt;
                  &lt;option value="Aruba" data-price="29.95"&gt;Aruba&lt;/option&gt;
                  &lt;option value="Australia" data-price="19.95" selected &gt;Australia&lt;/option&gt;
                  &lt;option value="Austria" data-price="14.95"&gt;Austria&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm presuming that I need to alter this segment of code: </p>
  
  <pre><code>// hides the popup if user clicks anywhere outside the container
          $('.overlay-bg').click(function(){
              $('.overlay-bg').hide();
  </code></pre>
  
  <p>&amp;&amp;</p>
  
  <pre><code>  // hide popup when user clicks on close button
          $('.close-btn').click(function(){
              $('.overlay-bg').hide();
               // hide the overlay
          });
  </code></pre>
  
  <p>So the function needs to set the selected option in the drop down back to the default which is 'Australia' when the user closes the overlay window.</p>
  
  <p>Please see Fiddle for the full code - <a href="http://jsfiddle.net/gvwg04y6/1/" rel="nofollow">FIDDLE</a></p>
  
  <p>Any advice would be great. </p>