单击 .aspx 按钮时，.ascx 下拉选项值不会改变

Question

我有一个 .aspx 重置按钮，因此当用户单击它时，下拉菜单值会更改为所选值 (Value1)。下拉菜单在 .ascx（用户控件）中实现，重置按钮在 .aspx 中实现。我已经在一个单独的文件中实现了 javascript 代码、.aspx 代码和 .ascx 代码。

下面是我的 .aspx 重置按钮：

//user clicks reset button from the .aspx page
    <input id = "resetButton" type="button" value="Reset"/> 

下面是我的 .ascx 代码：

 //drop down menu option (Value1) changes after reset button is clicked
    <select id="DropDownList">
      <option value="Value1" selected="selected">Value1</option>
      <option value="Value2">Value2</option>
      <option value="Value3">Value3</option>
    </select>

下面是我的 javascript 代码的样子：

   //changes the drop down menu Value1 option when user clicks the resetButton
        $("#resetButton").on("click", function () {
            $('#DropDownList option').prop('selected', function() {
                return this.defaultSelected;
            });
        });

在我的 .aspx 文件中，我有一个继承自 javascript 文件的 asp 占位符标记。如下图所示。

<asp:Placeholder ID= "Placeholder1" runat="server">
        <script src="../Script/Script.js"></script>
</asp:Placholder>

我还在 .ascx 文件中放置了脚本标签，但它仍然无法正常工作，如下所示。

   <script type="text/javascript">
        $("#resetButton").on("click", function () {
        $('#DropDownList option').prop('selected', function() {
            return this.defaultSelected;
        });
    });
    </script>

有谁知道我可能做错了什么。我仍在尝试更多地了解 .aspx 和 .ascx。

Answer 1

您的 ascx id 不一定与 HTML 中的 ID 匹配。 ClientID 属性将通过 ClientID 属性告诉您 HTML id。

我推荐这个（假设脚本在页面上）。无论表单上的对象名称是什么（例如，您的 ascx 实例可能被命名为 DropDownList1，那么您就可以这样引用它。

$("#resetButton").on("click", function () {
        $('#<%= DropDownList1.ClientID %> option').prop('selected', function() {
            return this.defaultSelected;
        });
    });

如果页面上没有脚本，则过程略有不同。