AngularJS 1.5.6下拉框值重置为空的问题求助

我明白你的困扰了！原生的表单重置在Angular里确实不好使，尤其是下拉框选中后Angular会自动移除空选项的情况，得从Angular的双向绑定逻辑入手来解决，而不是直接操作DOM。

问题根源 #

1. Angular的双向绑定是基于$scope（或组件属性）的，原生的document.getElementById("myForm").reset()只会修改DOM元素的值，但不会同步更新Angular的内部状态，所以视图不会正确响应。
2. 当下拉框选中非空选项后，Angular会自动移除空选项的DOM节点，这时候原生重置根本没法把空选项找回来。

解决方案 #

1. 确保下拉框用Angular的ng-model绑定

先确认你的下拉框是通过ng-model和$scope变量绑定的，比如：

<form name="myForm">
  <select ng-model="selectedState" ng-options="state.id as state.name for state in stateList">
    <option value="">--请选择州--</option>
  </select>
  <select ng-model="selectedMetro" ng-options="metro.id as metro.name for metro in metroList">
    <option value="">--请选择都会区--</option>
  </select>
  <!-- 其他表单字段 -->
  <button ng-click="myFunction()">重置</button>
</form>

这里的空选项一定要保留，Angular会在ng-model为空时自动显示它。

2. 修改重置函数，直接重置$scope绑定变量

把原来的DOM操作改成修改$scope里的绑定值，这样Angular会自动同步视图，并且把空选项重新渲染出来：

$scope.myFunction = function() {
  // 重置下拉框的绑定变量为空字符串
  $scope.selectedState = '';
  $scope.selectedMetro = '';
  
  // 如果需要重置其他表单字段，也一起重置对应的$scope变量
  // 比如 $scope.postalCode = '';
  
  // 可选：重置表单的验证状态（比如清除脏标记、触摸标记）
  if ($scope.myForm) {
    $scope.myForm.$setPristine();
    $scope.myForm.$setUntouched();
  }
};

3. 关于后端设置默认值的说明

后端返回邮政编码后设置state和metro的值，只要你是通过修改对应的$scope变量（比如$scope.selectedState = 后端返回的stateId），Angular会自动更新下拉框的选中状态，这部分逻辑是没问题的，和重置逻辑不冲突。

这样修改后，点击重置按钮就能把下拉框恢复为空选项，同时同步Angular的内部状态，完美解决你的问题！

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