How to get the selected item from a dropdown ordered list?

Question

I want to replace the default value of the span by the selected item list.

<span id="selected-lang">Select your language</span>
<ol class="lang-list">
    <li data-value="en" class="active">
        <a><img src="en.gif" />English</a>
    </li>
    <li data-value="de">
        <a><img src="de.gif" />Deutsch</a>
    </li>
    <li data-value="fr">
        <a><img src="en.gif" />Francais</a>
    </li>
</ol>

I tried with jQuery .change but doesnt'work:

$(".lang-list").change(function () {
  var str = "";
  $(".lang-list li.active").each(function () {
        str += $(this).text()+"";
      });
  $("#selected-lang").text(str);
})

How can i do this?
Thank you!

Answer 1

$(".lang-list a").click(function () {
    $('ol.lang-list li').removeClass('active');
    $(this).parent().addClass('active');
    $("#selected-lang").text($(this).text());
})

jsFiddle example