我的 HTML 页面中有一个下拉菜单，如下所示:
<select id="monthBox" ng-model="month">
<option value="{{month}}" ng-repeat="month in months">{{month}}</option>
</select>
下拉列表的数据源是months，它绑定(bind)到模型month。初始编号为 07 到 12，默认选择为 07:
但是，此数据源发生了变化。例如，用户点击“明年”按钮后，列表变为[01,02...,12]。
我想要实现的是，所选值应保留为07。但是当列表更改时，所选值会自动清空。它要么变成 01，要么变成空选项，具体取决于我测试的浏览器和设备。
我尝试了以下解决方案，但没有成功:
1. 单击“明年”按钮时，我更新模型。在 Controller 中，我再次将其设为 07:
$scope.model = '07';
但是，即使模型已更新，下拉列表仍然显示 01。
2.我尝试以编程方式设置 DOM 的值，如下所示:
var element = document.getElementById('monthBox');
element.value = $scope.month;
但是，这也没有任何效果。下拉列表仍然显示 01。
有什么建议吗？谢谢。
最佳答案
主要的问题是您将值分配给 $scope.model = '07';而你的ngModel是 $scope.month ，因此要使其正常工作，您应该执行以下操作:
$scope.month = '07';
此外，我强烈建议您使用 ngOptions而不是ngRepeat 。 ngOptions专为 <select> 打造标签。
看看这个简单工作演示:
(function() {
angular
.module('app', [])
.controller('mainCtrl', mainCtrl);
function mainCtrl($scope) {
$scope.months = [];
$scope.month = "07";
function load(i, maxSize) {
while (++i <= maxSize) {
$scope.months.push(i < 10 ? "0" + i : i);
}
}
load(6, 12);
$scope.loadMore = function() {
load(0, 6);
$scope.month = "07";
}
}
})();<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<select ng-options="month for month in months | orderBy: 'toString()'" ng-model="month">
</select>
<hr>
<button type="button" value="load" ng-click="loadMore()">Load more</button>
</body>
</html>希望对您有帮助!
关于javascript - 设置 HTML select 的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38543043/