checkbox change 时 JQuery 无法复制州 DDL

2026-10-24数据小许

结论

问题通常不在 SQLDataSource，而是 ASP.NET Web Forms 改写了服务器控件的客户端 id。页面中的 DropDownList6 实际渲染后可能是 ctl00_MainContent_DropDownList6，所以：

$('select#DropDownList6')

匹配不到目标元素。

可以改用控件生成后的 ClientID，也可以使用后缀选择器。勾选复选框时，将源下拉框的值赋给目标下拉框；取消勾选时，可以选中空白项，或把 selectedIndex 重置为第一项。

推荐写法：使用 ClientID

如果 JavaScript 直接写在 .aspx 页面中，可以让 ASP.NET 输出控件实际的客户端 ID：

$(function () {
  $('#<%= chkCopy.ClientID %>').on('change', function () {
    var $sourceState = $('#<%= DropDownList1.ClientID %>');
    var $targetState = $('#<%= DropDownList6.ClientID %>');

    if (this.checked) {
      $('#<%= TextBox5.ClientID %>').val($('#<%= TextBox1.ClientID %>').val());
      $('#<%= TextBox7.ClientID %>').val($('#<%= TextBox2.ClientID %>').val());
      $('#<%= TextBox9.ClientID %>').val($('#<%= TextBox3.ClientID %>').val());
      $('#<%= TextBox12.ClientID %>').val($('#<%= TextBox4.ClientID %>').val());

      $targetState.val($sourceState.val());

      $('#<%= TextBox14.ClientID %>').val($('#<%= TextBox6.ClientID %>').val());
    } else {
      $('#<%= TextBox5.ClientID %>').val('');
      $('#<%= TextBox7.ClientID %>').val('');
      $('#<%= TextBox9.ClientID %>').val('');
      $('#<%= TextBox12.ClientID %>').val('');
      $('#<%= TextBox14.ClientID %>').val('');

      $targetState.prop('selectedIndex', 0);
    }
  });
});

这种写法不依赖控件最终生成的 ID 格式。

如果代码位于外部 JavaScript 文件

外部 .js 文件不会处理 <%= ... %> 表达式，这时可以改用属性后缀选择器：

$(function () {
  $('input:checkbox[id$="chkCopy"]').on('change', function () {
    var $sourceState = $('select[id$="DropDownList1"]');
    var $targetState = $('select[id$="DropDownList6"]');

    if (this.checked) {
      $('input:text[id$="TextBox5"]').val(
        $('input:text[id$="TextBox1"]').val()
      );

      $('input:text[id$="TextBox7"]').val(
        $('input:text[id$="TextBox2"]').val()
      );

      $('input:text[id$="TextBox9"]').val(
        $('input:text[id$="TextBox3"]').val()
      );

      $('input:text[id$="TextBox12"]').val(
        $('input:text[id$="TextBox4"]').val()
      );

      $targetState.val($sourceState.val());

      $('input:text[id$="TextBox14"]').val(
        $('input:text[id$="TextBox6"]').val()
      );
    } else {
      $('input:text[id$="TextBox5"]').val('');
      $('input:text[id$="TextBox7"]').val('');
      $('input:text[id$="TextBox9"]').val('');
      $('input:text[id$="TextBox12"]').val('');
      $('input:text[id$="TextBox14"]').val('');

      $targetState.prop('selectedIndex', 0);
    }
  });
});

这里的选择器是：

[id$="DropDownList6"]

其中 $= 表示 ID 以指定文本结尾，因此能够匹配 ASP.NET 生成的完整客户端 ID。

确保两个下拉框的 value 一致

.val() 复制的是 <option> 的 value，不是显示文本。即使两个 DropDownList 使用同一个数据表，也应明确设置相同的 DataValueField 和 DataTextField：

<asp:DropDownList
    ID="DropDownList1"
    runat="server"
    DataSourceID="SqlDataSourceStates"
    DataTextField="StateName"
    DataValueField="StateCode">
</asp:DropDownList>

<asp:DropDownList
    ID="DropDownList6"
    runat="server"
    DataSourceID="SqlDataSourceStates"
    DataTextField="StateName"
    DataValueField="StateCode">
</asp:DropDownList>

StateName 和 StateCode 只是示例，需要换成 xrefState 表中的实际字段名。

假设源下拉框当前的值是 CA，目标下拉框中也必须有对应选项：

<option value="CA">California</option>

否则执行：

$targetState.val('CA');

不会选中任何项目。

正确清空下拉框

下面的代码只有在目标下拉框包含 value="" 的选项时才会生效：

$targetState.val('');

例如：

<asp:ListItem Text="-- Select State --" Value="" />

如果没有空值选项，可以将下拉框重置到第一项：

$targetState.prop('selectedIndex', 0);

如果需要取消所有选择，可以使用：

$targetState.prop('selectedIndex', -1);

不过对于普通的单选下拉框，通常更适合保留一个“请选择州”的默认项。

如果页面中的其他逻辑依赖下拉框的 change 事件，可以在赋值后主动触发该事件：

$targetState.val($sourceState.val()).trigger('change');

需要改的地方有两个：不要继续使用固定的 select#DropDownList6，并确认两个下拉框中的选项 value 完全一致。