如何用jQuery批量重置下拉框选中值？多选择器仅生效首个问题修复

你遇到的问题核心是：$("#cityCode, #townCode")[0]仅获取了匹配选择器的第一个DOM元素，所以只有第一个下拉框被重置。要批量处理所有目标下拉框，有两种简洁的解决方法：

方法1：使用.each()遍历重置 #

通过jQuery的.each()方法遍历所有匹配的下拉框元素，逐个设置选中索引为0：

$("#cityCode, #townCode").each(function() {
  this.selectedIndex = 0;
});

遍历过程中this指向当前处理的下拉框DOM元素，直接修改其原生属性即可完成重置。

方法2：使用.prop()批量设置属性 #

利用jQuery的.prop()方法，直接给所有匹配元素批量设置selectedIndex属性，无需手动遍历：

$("#cityCode, #townCode").prop("selectedIndex", 0);

这种方式更简洁，是jQuery批量操作元素属性的标准写法。

完整按钮点击事件示例 #

将上述代码嵌入按钮的点击事件中，即可实现点击清除所有目标下拉框的选中值：

$("#clearButton").click(function() {
  // 任选一种方法即可
  $("#cityCode, #townCode").prop("selectedIndex", 0);
});

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