title: Drop-down currency selector
body: <p>I am building an eCommerce site and have included some code for adding a drop-down currency selector. However, although the currency physically changes, the top of the menu that should also update to display the name of the currently selected currency only displays the 'United Kingdom' default.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="currency"&gt;
  &lt;form method="post" action="/" name="lancur"&gt;
      &lt;table class="tables"&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;p class="both"&gt;&lt;b&gt;Currency:&lt;/b&gt;&lt;/p&gt;
                  &lt;/td&gt;
                  &lt;td&gt;&lt;img src="/admin/images/flags/gb.gif" align="right" hspace="0" vspace="0" alt="Sterling (GBP)"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2" width="100%" style="padding-top: 3px"&gt;
                      &lt;select name="currency" style="width: 100%" onchange="lancur.submit();"&gt;
                          &lt;option value="2"&gt;Euro (EUR)&lt;/option&gt;
                          &lt;option selected="" value="1"&gt;Sterling (GBP)&lt;/option&gt;
                          &lt;option value="3"&gt;US Dollar (USD)&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;input type="text" class="conform" name="conform" value=""&gt;
  &lt;/form&gt;
  &lt;div class="current-currency"&gt;&lt;span&gt;&lt;i class="fa fa-gbp"&gt;&lt;/i&gt; United Kingdom&lt;/span&gt; &lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;ul style="overflow: hidden; display: block;"&gt;
      &lt;li&gt;&lt;a href="?currency=1" rel="nofollow"&gt;&lt;i class="fa fa-gbp"&gt;&lt;/i&gt; United Kingdom&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="?currency=2" rel="nofollow"&gt;&lt;i class="fa fa-eur"&gt;&lt;/i&gt; Europe&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="?currency=3" rel="nofollow"&gt;&lt;i class="fa fa-usd"&gt;&lt;/i&gt; United states&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is the Javascript:</p>
  
  <pre><code>&lt;script&gt;
  var current = $( ".currency select option:selected" ).val();
  if (current==1){
    $( ".current-currency span" ).html('&lt;i class="fa fa-gbp"&gt;&lt;/i&gt; United Kingdom');
  }
  if (current==2){
    $( ".current-currency span" ).html('&lt;i class="fa fa-eur"&gt;&lt;/i&gt; Europe');
  }
  if (current==3){
    $( ".current-currency span" ).html('&lt;i class="fa fa-usd"&gt;&lt;/i&gt; United States');
  }
  $( ".current-currency" ).click(function() {
    $( ".currency ul" ).slideToggle("fast");
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any help would be very much appreciated - many thanks in advance,</p>
  
  <p>Mike</p>