如何通过querySelectorAll获取.data下的select元素并重置表单值

你的核心问题是querySelectorAll的选择器写法错误，逗号分隔的每个选择器是独立的，原写法里只有.data>input是限定在.data容器内的子元素，而textarea和select是全局选择页面所有对应元素，这不仅不严谨，还可能因为范围错误导致预期外的结果。

修正后的代码 #

直接给每个元素选择器加上.data的范围限定，确保只选中目标容器内的元素：

function resetValues() {
  // 每个选择器都明确限定在.data容器下
  var arr = document.querySelectorAll(".data>input, .data>textarea, .data>select");
  for (var i = 0; i < arr.length; i++) {
    arr[i].value = "";
  }
}

或者更简洁的写法（效果一致）：

function resetValues() {
  var arr = document.querySelectorAll(".data input, .data textarea, .data select");
  for (var i = 0; i < arr.length; i++) {
    arr[i].value = "";
  }
}

为什么这样有效 #

1. 修正后的选择器会精准选中.data容器内的input、textarea和select元素，不会误选页面其他位置的同类型元素
2. 对于select元素，由于你已经定义了value=""的option，设置select.value = ""会自动选中这个空选项，完美实现重置效果

你之前尝试的写法问题说明 #

你之前的几种写法都偏离了正确方向：

• 诸如option[selected]、select option这类写法，选中的是select的子选项元素，而重置select需要操作select本身，不是它的子元素
• 所有未给textarea/select加上.data限定的写法，都是全局选择，范围错误

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