title: How to capture the value from a drop down list created using <ul> <li> tags
body: <p>I have a drop down list having country names with their flag images. Since we cannot create such a list using <code>&lt;select&gt; &lt;option&gt;</code> tags, I created it using <code>&lt;ul&gt; &lt;li&gt;</code>. Now I want to capture the value selected by user and use it for some other purpose. How can I do it?</p>
  
  <p>This is how the list has been created:</p>
  
  <pre><code>&lt;form id="formId" action="" method="post" class="loginForm"&gt;
    &lt;fieldset id="localeSelect"&gt;
     &lt;div&gt;
       &lt;div  id="localeIndicator"&gt;
        &lt;a href="#" title="Select a country"&gt;
         &lt;span class="united-kingdom"&gt;&lt;/span&gt;UK &amp;ndash; English
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;ul class="no-bullets block-list" role="tablist"&gt;
       &lt;li&gt;&lt;a href="#"&gt;&lt;span class="austria"&gt;&lt;/span&gt;Austria&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;fieldset&gt;
   &lt;input type="hidden" name="locale" /&gt;
   &lt;input type="submit" value="Continue" /&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p></p>