jquery - 如何从下拉有序列表中获取所选项目？

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但不起作用：

$(".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 示例