jQuery 用于根据下拉列表的更改值在 asp 中继器中设置背景颜色

Posted 2023-03-06

【中文标题】jQuery 用于根据下拉列表的更改值在 asp 中继器中设置背景颜色

【英文标题】：jQuery for setting background color in asp repeater based on changed value of a dropdownlist

【发布时间】：2020-10-21 23:19:41

【问题描述】：

我的 asp.net 网页中有一个中继器，其中包含一个带有行的表。 一行中有几个文本框、下拉菜单和其他字段。 我想要的是，当我的转发器行中的一个下拉列表的值发生变化时，整个表格行都会获得一种颜色。 我设法在服务器端做这个，但我想要它在客户端。

这是我的代码：

HTML

<table id="InvoerUrenTable" class="InvoerUrenLeftMargin100">    
<asp:Repeater ID="urenRepeater" runat="server">
    <ItemTemplate>
        <tr runat="server" ID="itemTemplateRow">
            ...
            ...
            ...
            <td >
                <asp:DropDownList runat="server" ID="projectDropDown" ></asp:DropDownList>
            </td>
            ...
            ...
            ...
            ...
        </tr>
    </ItemTemplate>
</asp:Repeater>
</table>
<script type="text/javascript">
      $(document).ready(function () 
          $('#projectDropDown').change(function () 
              var index = $(this).parent().children().index($(this));
              $('#urenRepeater tr:nth-child(' + index + ')').addClass("highlight")    
          );
      );
</script>

CSS

.highlight 
background-color: #E52718;

上面的脚本似乎不起作用。 我做错了什么？

2020 年 6 月 7 日更新

我发现我选择了错误的行 ID 来更改课程。

  <script type="text/javascript">
      $(document).ready(function () 
          $('.projDropDown').change(function () 
              var index = $(this).parent().children().index($(this));
              $('#body_urenRepeater_itemTemplateRow_' + index).addClass("highlight")    
          );
      );
  </script>

现在的问题是我的索引是错误的，如果我更改其中一个下拉列表的值，它每次都会标记第一行。

【问题讨论】：

您可以为asp 添加html generated 代码吗？

【参考方案1】：

由于下拉列表位于重复器中 - 因此可能会在最终页面中被复制多次 - 最终会在呈现的 HTML 中以不同的 ID 结束（如果 asp.net 尝试使 ID 在浏览器），否则您最终会得到多个具有相同 ID 的下拉菜单（这是无效的）。无论哪种方式，您都会遇到问题，因为 jQuery 代码无法识别正确的目标。

我建议改用 CSS 类作为选择器。这不会被 asp.net 渲染引擎改变，它还允许您使用一个事件处理程序来定位多个元素。

例如

<asp:DropDownList runat="server" ID="projectDropDown" CssClass="projDropDown" ></asp:DropDownList>

和

$('.projDropDown').change(function () 

【讨论】：

感谢您的回答。我把它改成了一个类，但仍然没有让它工作。

“没有运气”没有给我任何有用的信息来帮助你进一步。如果您使用浏览器的“查看源代码”功能来检查由 asp.net 发送到浏览器的完成的 HTML，将会很有帮助。完成的 HTML 是 jQuery 正在使用的（它对 <asp:Repeater 或 <asp:Dropdownlist 一无所知 - 这些东西仅由服务器端的 ASP.NET 用于生成真正的 HTML，然后发送到浏览器） .向我们展示您的转发器生成的 HTML，然后我们就有更好的机会了解 jQuery 可能出错的地方。

另外，当您运行代码时，究竟会发生什么？您是否调试过 JQuery（例如，通过使用浏览器的调试器，或通过添加一些控制台日志记录）？例如您是否验证了“更改”事件是否被触发？区分事件是否被触发是有用的，但是它无法添加高亮，或者事件是否根本没有被触发。这两种情况有不同的解决方案。那种信息，加上 HTML，会让我们更清楚地了解情况。