我无法使用 asp.net 网站中选择的 onchange 事件更改面板可见性

Question

我正在使用选择的 jQuery 插件来选择选项。在第一次选择的基础上，我想决定显示或隐藏哪个面板。我有两个面板，一个是
<asp:Panel runat="server" ID="panel1">
另一个是
<asp:Panel runat="server" ID="panel2">
我选择的 onchange 事件如下：（这是用 .aspx 编写的）

<script type="text/javascript">  
('#myId').change(function () {  
                   var abc = $(this).val();  
                   alert('The option with value ' + abc + ' was selected.');  
                   if (abc == "val1") {  
                       alert('Msg1');  
                       document.getElementById("panel2").style.visibility = true;  
                       document.getElementById("panel1").style.visibility = false;  
                       alert('Msg2');  
                   }  
                   else {  
                       alert('Elseloop');  
                       document.getElementById("panel1").style.visibility =true;  
                       document.getElementById("panel2").style.visibility = false;  
                       alert('Elseloop2');  
                   }  
                });  
</script>

我也尝试了document.getElementById("panel1").style.display ="block";，但没有 +ve 结果，两个循环中的第一个警报语句正常工作，但面板没有改变它们的可见性。

而我的html如下：

               <select data-placeholder="some text" id="myId" style="width: 350px;" class="chosen-select" tabindex="-1">
                    <option value=""></option>
                    <option value="val1">Text1</option>
                    <option value="val2">Text2</option>
                    <option value="val3">Text3</option>
                    <option value="val4">Text4</option>
                </select>

有什么建议吗？我在哪里犯错。

Answer 1

<asp:Panel runat="server" ID="panel1">

和

<asp:Panel runat="server" ID="panel2">

是控件runat="server"，因此您的 id 可能呈现为：

"ctl00_panel1" and "ctl00_panel2", change your id:

要在内容控件中获取完整的控件 ID 名称，请使用 ClientID：

 $("#<%=Panel1.ClientID%>").change(function () {  

Answer 2

你必须用美元符号来称呼它，并把它放在准备好的文件上

在之前添加 $(function(){; 和 });会为你做的。

如果您想在代码中获取 Panel id，您应该尝试从已解析代码的 HTML 中获取其正确的 id

<script>
    $(function(){
            $('#myId').change(function () {  
                   var abc = $(this).val();  
                   alert('The option with value ' + abc + ' was selected.');  
                   if (abc == "val1") {  
                       alert('Msg1');  
                       document.getElementById(<%= panel2.ClientID %>).style.visibility = true;  
                       document.getElementById(<%= panel1.ClientID %>).style.visibility = false;  
                       alert('Msg2');  
                   }  
                   else {  
                       alert('Elseloop');  
                       document.getElementById(<%= panel1.ClientID %>).style.visibility =true;  
                       document.getElementById(<%= panel2.ClientID %>).style.visibility = false;  
                       alert('Elseloop2');  
                   }  
                });
             });
</script>