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

Question

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

例如，我有2个选项的下拉列表：

• 取消
• 确认

如果用户选择＆＃34;已取消＆＃34;选项 - 下拉列表不应包含所选选项。在这种情况下，唯一一个确认＆＃39;选项应该在下拉列表中可用。

如果用户选择＆＃34;确认＆＃34;选项 - 下拉列表应包含唯一的一个＆＃34;已取消＆＃34;选项。

换句话说 - 我需要在select 中显示所选值（例如＆＃39;已取消＆＃39;），但不显示下拉列表中的此值（下拉列表将包含唯一的＆＃39;已确认的＆＃39;值）。

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

我在我的前端使用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

回到问题评论中提到的＆＃34; hack＆＃34; 方法，您可以实现以下内容：

<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>

＆＃34;选择＆＃34;标签通知浏览器这是默认值。然后，您可以实现任何您希望的输入验证方法。

就个人而言，我更喜欢在servlet级别执行所有操作，但您可以通过JQuery或JavaScript函数实现此功能。

Answer 3

您需要添加ng-change="changeFunction(appt.statusId)"之类的

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

将bellow 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 */
    }
}