下拉选择后图像在/可见

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 并从中获取值。