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

Question

When I select a language in the dropdown menu the matching language image should appear in a div next to it, making the irrelevant images invisible. I can't get it to work, I've been trying with display: none; and block; and with .hide() .show()

Can someone see what I am doing wrong here?

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