Question

当我在下拉菜单中选择一种语言时，匹配的语言图像应显示在其旁边的div中，从而使不相关的图像不可见。我无法使用它，我一直在尝试使用display: none;和block;以及.hide() .show()

有人可以在这里看到我在做什么吗？

<form id="form1" runat="server">
  <div id="navLanguage">
    <asp:DropDownList ID="ddlLanguages" runat="server" AutoPostBack="True" >
    <asp:ListItem Text="English" Value="en-us" />
    <asp:ListItem Text="Nederlands" Value="nl" />
    <asp:ListItem Text="Português" Value="pt-br" />
    </asp:DropDownList>
  </div>
</form>

<div ID="Flags" runat="server">
    <asp:Image runat="server" ID="FlagUK" imageUrl="Images/Language Icons/FlagUK.png" Value="en-us" />
    <asp:Image runat="server" ID="FlagNL" imageUrl="Images/Language Icons/FlagNL.png" Value="nl" />
    <asp:Image runat="server" ID="FlagBR" imageUrl="Images/Language Icons/FlagBR.png" Value="pt-br" />
</div>

<script src="https://code.jquery.com/jquery-1.3.2.min.js"></script> 
<script type="text/javascript">
  $(document).ready(function () {
    $('#ddlLanguages').on ('change', function () {
      var selected = $(this).val();
      if (selected === "en-us") {
        $('#FlagUK').show();
        $('#FlagNL').hide();
        $('#FlagBR').hide();
      }
      if (selected === "nl") {
        $('#FlagUK').hide();
        $('#FlagNL').show();
        $('#FlagBR').hide();
      }
      if (selected === "pt-br") {
        $('#FlagUK').hide();
        $('#FlagNL').hide();
        $('#FlagBR').show();
      }
    });
 });
</script>

Answer 1

尝试将“更改”事件更改为“点击”事件通过这种方式，您可以直接选择dom并从中获取价值。

选择下拉菜单后，图片显示/可见

1 个答案: