Javascript 下拉选择后图像处于/可见状态

当我在下拉菜单中选择一种语言时，匹配的语言图像应该出现在它旁边的一个div中，使不相关的图像不可见。我无法让它工作，我一直在尝试显示：无；和块；和。隐藏。显示

有人能看出我做错了什么吗

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

---

尝试将“更改”事件更改为“单击”事件

---

通过这种方式，您可以直接选择dom并从中获取值。

看起来您正在使用ASP.Net webforms。因此，所有ID属性或runat=server控件都将在运行时动态更改。如果在浏览器中检查DOM，您将看到它们与代码所期望的完全不同。要解决此问题，请使用控件的ClientID属性来访问它，或者使用类。你真的需要将它升级到至少1.12.1，最好是3.3.1。你有autopostback=true，所以如果你选择时页面正在发布，那么你的JS将永远不会执行。好的。。。对于这段代码，有什么切实可行的解决方案呢？@Rory McCrossan:我正在使用ASP.NET和MVS。我写的这段代码放在母版页上，母版页不需要使用ClientID属性吗？此外，当我检查DOM时，ID属性与代码匹配，单击事件似乎起作用，但仅在单击时起作用。如果我想在单击后保留该值，我需要使用什么？您可以将该值保存在缓存、cookies中