如何从下拉列表中隐藏已选择的值？

Question

我需要从下拉列表中隐藏已选择的值。

例如，我有 2 个选项的下拉菜单：

• 已取消
• 已确认

如果用户选择“已取消”选项 - 下拉列表不应包含所选选项。在这种情况下，下拉列表中应该只有一个“确认”选项可用。

如果用户选择“确认”选项 - 下拉菜单应包含唯一一个“已取消”选项。

换句话说 - 我需要在select中显示选定的值（例如“已取消”），但不在下拉列表中显示该值（下拉菜单将包含唯一的“已确认”值）。

问题是 - 是否可以实施，如果可以 - 如何实施？

我在前端使用 AngularJS。

<select ng-options="status.id as status.name for status in appt.possibleStatuses" 
   ng-model="appt.statusId">
</select>

我了解，可以使用自定义 UI 控件来实现，但我想通过默认的 select 标签来实现。

但是，如果您知道不使用 select 标签的简单而好的解决方案 - 欢迎您:)

谢谢！

Answer 1

您可以使用函数代替appt.possibleStatuses

<select ng-options="status.id as status.name for status in filterFunction()" 
   ng-model="appt.statusId">
</select>

在你的控制器代码中

$scope.filterFunction = function () {
    var statuses = $scope.appt.possibleStatuses;
    // any custom filter logic for statuses
    return statuses;
}

Answer 2

回到问题 cmets 中提到的我的 "hack" 方法，您可以实现如下内容：

<form id="form" method="post">
  <select name="value_Name">
     <option value="" selected></option>
     <option value="value1">value1</option>
     <option value="value2">value2</option>
  </select>
</form>

“selected”标签通知浏览器这是默认值。然后，您可以实现任何您希望的输入验证方式。

就我个人而言，我更喜欢在 servlet 级别做所有事情，但您可以通过 JQuery 或 JavaScript 函数来实现。

Answer 3

你需要加ng-change="changeFunction(appt.statusId)"like

<select ng-options="status.id as status.name for status in appt.possibleStatuses" ng-model="appt.statusId" ng-change="changeFunction(appt.statusId)">

将下面的 js 代码放入你的控制器中

$scope.changeFunction = function(status){
    if(status == "Cancelled"){
        /* code for hide or remove "Confirm" option */
    } else if(status == "Confirm"){
        /* code for hide or remove "Cancelled" option */
    }
}