Question

我有一个从列表中创建的选择下拉列表。在选择加单击后，表单将以跳转菜单方式重定向。有问题的下拉实际上是一个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>

跳转工作。我需要的是下拉左侧的相应图像以更改onChange。

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

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

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

如上所述，我正在使用WordPress小部件。这是优化的Drowndown菜单，我不确定我是否可以为li添加值属性。

感谢。

Answer 1

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

Download或链接：

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

交换图像在选择列表下拉onChange之外

1 个答案: