如何从下拉菜单中获取所选项目？

Question

我想用所选项目列表替换跨度的默认值。

<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> 

我试图用jQuery .change但doesnt'work：

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

我怎样才能做到这一点？
谢谢！

Answer 1

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

jsFiddle example