jQuery实现表格行内project_id下拉框联动显隐对应列

嘿，我完全懂你的困扰——现在你的代码会把所有行的column_r_和column_p_元素一起显示或隐藏，没法只针对当前操作的那一行。其实只要利用jQuery的DOM遍历方法，就能轻松实现精准定位，咱们来一步步调整：

问题根源 #

你当前用的选择器$('[class*="column_r_"]')是全局匹配所有符合条件的元素，所以会影响到表格里的每一行。咱们需要先锁定当前下拉框所在的行，再在该行范围内操作目标元素。

修改后的代码方案 #

<script type="text/javascript">
$(document).ready(function(){
    // 页面加载时初始化每一行的状态（处理默认选中的情况）
    $('select[name="project_id[]"]').each(function() {
        // 找到当前下拉框所在的行
        const currentRow = $(this).closest('tr');
        if ($(this).val() !== '') {
            currentRow.find('[class*="column_p_"], [class*="column_r_"]').show();
        } else {
            currentRow.find('[class*="column_p_"], [class*="column_r_"]').hide();
        }
    });

    // 监听project_id下拉框的变化事件
    $('select[name="project_id[]"]').change(function(){
        // 核心：锁定当前操作的行
        const currentRow = $(this).closest('tr');
        
        if ($(this).val() !== '') {
            // 只在当前行内查找并显示目标列
            currentRow.find('[class*="column_p_"]').show();
            currentRow.find('[class*="column_r_"]').show();
        } else {
            // 只在当前行内查找并隐藏目标列
            currentRow.find('[class*="column_p_"]').hide();
            currentRow.find('[class*="column_r_"]').hide();
        }
    });
});
</script>

关键逻辑说明 #

1. closest('tr')：从当前触发事件的下拉框元素出发，向上查找最近的<tr>标签，精准锁定当前操作的行，不会影响其他行。
2. find()方法：在锁定的行内部查找目标元素，确保所有操作只作用于当前行的paid_by和reimbursement列。
3. 页面初始化的each()循环：处理页面加载时就已经选中project_id的行，避免这些行的目标列被错误隐藏。

可选优化（更精准的选择器） #

因为你的列元素类名里包含了{{$expense->id}}，也可以通过这个id直接定位，比如：

// 从下拉框的id中拆分出$key值
const rowKey = $(this).attr('id').split('.')[1];
// 直接通过类名精准匹配当前行的目标元素
$(`.column_p_${rowKey}`).show();
$(`.column_r_${rowKey}`).show();

不过第一种closest+find的方式更通用，不管你的id命名规则怎么变都能生效。

内容的提问来源于stack exchange，提问作者dfeva