使用JavaScript/jQuery实现主下拉框同步更新多个子下拉框时仅最后一个生效的问题求助

Hey there! I totally get the frustration—when you pick an option from the bulk row's dropdown, only the last row updates. Let's break down what's going wrong and fix it step by step:

核心问题：单选按钮的命名冲突 #

Looking at your HTML, every row's location radio buttons share the exact same name="new_ddlocationArea". In HTML, radio buttons with the same name attribute are grouped globally—meaning only one radio button across all rows can be selected at a time. That's why only the last row seems to respond; it's the only one that can hold the selected state once the loop finishes.

修复步骤 #

1. 为每行的单选按钮设置唯一名称

Modify the name attribute of each row's radio buttons to include a unique identifier (like the date suffix you already use for IDs). For example:

• For the 3/11/2025 row: change name="new_ddlocationArea" to name="new_ddlocationArea_3112025"
• For the 3/18/2025 row: use name="new_ddlocationArea_3182025"
• For dynamic rows generated from your database, append the record's unique ID or date to the name.

This lets each row's radio buttons form their own independent group, so selecting an option in one row won't interfere with others.

2. 修正批量同步的JavaScript函数

Here's a corrected version of the copy_ddLocationAreaChanged function that targets all rows properly. It updates both the radio button state and the dropdown button text:

function copy_ddLocationAreaChanged(selectedValue) {
    // Get the display text of the selected bulk option
    const selectedText = $('#copy_ddLocationAreas input[value="' + selectedValue + '"]')
        .siblings('label').text().trim();

    // Loop through all data rows (skip the first bulk row)
    $('#insTblDates tbody tr:not(:first)').each(function() {
        const $row = $(this);
        
        // Find and check the matching radio button in this row
        const $targetRadio = $row.find('.new_ddLocationArea[value="' + selectedValue + '"]');
        $targetRadio.prop('checked', true);
        
        // Update the dropdown button to show the selected option
        $row.find('.new_btnLocationArea').html(
            '<span class="fa fa-globe"></span>&nbsp;' + selectedText
        );
    });
}

3. 优化动态行生成（如果适用）

If you're generating rows from your database, make sure to include the unique identifier in both the radio button name and id attributes. For example, a dynamic row for date 3252025 should have radio names like new_ddlocationArea_3252025.

额外小建议 #

• Ditch inline onclick handlers for cleaner event listeners in your JS:

  $('#copy_ddLocationAreas .copy_ddLocationArea').on('change', function() {
      copy_ddLocationAreaChanged(this.value);
  });
  

• Add a "Clear All" option in the bulk dropdown if needed—just loop through rows and set all radio buttons to checked: false.

Give these fixes a try, and let me know if you need help tweaking the dynamic row code or troubleshooting further!

备注：内容来源于stack exchange，提问作者JimmyG