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

Question

I need to hide already selected value from the dropdown list.

For example, I have the dropdown with 2 options:

• Cancelled
• Confirmed

If user select the "Cancelled" option - the dropdown list shouldn't contain the selected option. In this case the only one 'Confirm' option should be available in the dropdown list.

If user select "Confirm" option - the dropdown should contain the only one "Cancelled" option.

In other words - I need to display selected value in the select (for example 'Cancelled'), but doesn't display this value in the dropdown list (dropdown will contain the only 'Confirmed' value).

The question is - is it possible to implement, and if yes - how?

I'm using AngularJS on my frontend side.

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

I understand, that it's possible to implement with custom UI control, but I want to do it via default select tag.

But if you know easy and nice solutions for this problem without using of the select tag - you are welcome :)

Thanks!

Answer 1

You can use a function instead of appt.possibleStatuses

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

And in your controller code

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

Answer 2

Going back to my "hack" method mentioned in the question comments, you could implement something like this:

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

The "selected" tag informs the browser that this is the default value. You can then implement any means of input validation you wish.

Personally, I prefer to do everything at a servlet-level but you can implement this via JQuery or JavaScript functions.

Answer 3

You need to add 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)">

Put bellow js code in your controller

$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 */
    }
}