如何用jQuery或原生JS清除表单嵌套选项字段？

jQuery 实现 #

监听主选择框的切换事件，遍历所有嵌套字段所在的行，清空其中的选择框和文本输入框：

// 绑定主选择框的change事件
$('#StatusId').on('change', function() {
  // 获取所有嵌套字段所在的tr（带有rel属性的行）
  $('tr[rel]').each(function() {
    // 清空当前行内的select元素
    $(this).find('select.wpcf7-form-control').val('');
    // 清空当前行内的文本输入框
    $(this).find('input[type="text"].wpcf7-form-control').val('');
  });
});

如果只需要清空当前选中选项对应rel的行，而保留其他行的内容，可以修改为：

$('#StatusId').on('change', function() {
  // 获取当前选中选项的rel值
  const activeRel = $(this).find('option:selected').attr('rel');
  // 清空对应rel行内的表单元素
  $(`tr[rel="${activeRel}"]`).find('select, input[type="text"]').val('');
});

原生 JavaScript 实现 #

无需依赖jQuery，直接用原生DOM操作实现相同逻辑：

// 获取主选择框元素
const statusSelect = document.getElementById('StatusId');

// 绑定change事件
statusSelect.addEventListener('change', function() {
  // 获取所有带rel属性的tr元素
  const nestedRows = document.querySelectorAll('tr[rel]');
  
  nestedRows.forEach(row => {
    // 清空行内的select元素
    const selects = row.querySelectorAll('select.wpcf7-form-control');
    selects.forEach(select => {
      select.selectedIndex = 0; // 等价于 select.value = '';
    });
    
    // 清空行内的文本输入框
    const inputs = row.querySelectorAll('input[type="text"].wpcf7-form-control');
    inputs.forEach(input => {
      input.value = '';
    });
  });
});

对应“只清空当前选中选项对应rel行”的原生实现：

const statusSelect = document.getElementById('StatusId');

statusSelect.addEventListener('change', function() {
  // 获取当前选中选项的rel属性
  const activeRel = this.options[this.selectedIndex].getAttribute('rel');
  // 找到对应rel的行
  const activeRow = document.querySelector(`tr[rel="${activeRel}"]`);
  
  if (activeRow) {
    // 清空该行内的select
    const selects = activeRow.querySelectorAll('select');
    selects.forEach(s => s.selectedIndex = 0);
    // 清空该行内的文本输入框
    const inputs = activeRow.querySelectorAll('input[type="text"]');
    inputs.forEach(i => i.value = '');
  }
});

说明 #

• 代码匹配所有带有wpcf7-form-control类的表单元素，和你的HTML结构完全对应
• 对于select元素，val('')或selectedIndex=0会选中第一个空选项（如果存在），无空选项则清空选中状态
• 文本输入框直接设置value=''即可清空内容

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