gpt4 book ai didi

javascript - 设置 HTML select 的值

转载 作者:行者123 更新时间:2023-12-03 06:28:20 24 4
gpt4 key购买 nike

我的 HTML 页面中有一个下拉菜单,如下所示:

<select id="monthBox" ng-model="month">
<option value="{{month}}" ng-repeat="month in months">{{month}}</option>
</select>

下拉列表的数据源是months,它绑定(bind)到模型month。初始编号为 07 到 12,默认选择为 07:

enter image description here

但是,此数据源发生了变化。例如,用户点击“明年”按钮后,列表变为[01,02...,12]。

enter image description here

我想要实现的是,所选值应保留为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而不是ngRepeatngOptions专为 <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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com