0

我有一个从列表创建的下拉选择。在选择并单击 go 时，表单将以跳转菜单方式重定向。有问题的下拉菜单实际上是一个 WordPress 主菜单，但出于这些目的，这可能并不重要。

<nav class="widget">
   <ul id="odm-13-widget" class="menu">
      <li id="menu-item-122" class="menu-item-122"><a href="http://www.ex1.com">English</a></li>
      <li id="menu-item-120" class="menu-item-120"><a href="http://www.ex2.com/">United Kingdom</a></li>
      <li id="menu-item-123" class="menu-item-123"><a href="http://www.ex3.com/">France</a></li>
   </ul>
</nav>

jumpto 有效。我需要的是下拉左侧的相应图像以在 onChange 上进行更改。

<div id="langflagcontainer"><img id="langflag" class="flags" src="flag_us.gif" /></div>

该标志以 flag_us.gif 开头，但是当您选择 United Kingdom 或 menu-item-120 onChange 时，它​​将更改为 flag_uk.gif。法国的下一个选项是 flag_fr.gif。

我在 SO 上找到了使用带有值和选项的选择列表而不是带有 ul 和 li 元素的列表的示例。

如前所述，我正在使用 WordPress 小部件。它是优化的下拉菜单，我不确定是否可以向 li 添加值属性。

谢谢。

4

1 回答 1

1

您可以使用jQuery来完成此操作

下载或链接：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

将jQuery库添加到您的页面中，然后在您的标签之前添加此代码</body>：

<script type="text/javascript">
    $("#odm-13-widget").parent("nav").onChange(function(){
        var country = $(this).val();
        switch(country){
            case 'English': country = "us"; break;
            case 'United Kingdom': country = "uk"; break;
            case 'France': country = "fr"; break;
        }
        $("#langflag").attr("src","flag_"+country+".gif");
    });
</script>
于 2013-01-09T18:44:54.317 回答