How to Remove The Previously Selected Option from a Drop-Down Menu in a Table

how to remove selected option from drop down and show available option in angular

First, you need to relate this.response.payload with your this.formArr. Then, you will splice the selected car from the other objects of this.formArr array.

onChangeCar(value) {
  var str = value;

  this.serverId = str.substr(3);

  var index = this.response.payload.findIndex(x => x.Id == this.serverId);

  this.response.payload.splice(index, 1);
}

Automatically remove the selected option in drop down when the row is cloned

First of all id selector should be unique so it's better to use class in that case. In your code, you always get the first dropdown and removing the selected value. To make it works get the last dropdown, clone it and remove the selected value from the clone.

function cloneRow(e) {  e.preventDefault();  var row = document.querySelector(".dropdowns:last-child");  var tableBody = document.querySelector("#tableDrop tbody");  var clone = row.cloneNode(true);  clone.querySelector('.beansDrop').remove(row.querySelector('.beansDrop').selectedIndex);  tableBody.appendChild(clone);}

<table id="tableDrop">  <tr class="dropdowns">    <td class="beansDropdown">      <select name="beans[]" class="beansDrop">        <option value="beans1">beans1</option>        <option value="beans2">beans2</option>        <option value="beans3">beans3</option>        <option value="beans4">beans4</option>      </select>    </td>    <td id="quantity">      <input type="number" name="quan[]" placeholder="enter quantity" required>    </td>    <td id="remove">      <input type="button" value="✖" onclick="RemoveOrder()">    </td>  </tr></table><button onClick="cloneRow(event)" type="button">add order</button>

remove selected option from drop down list in angular

If you want to not show but can be selected you need attrib as hidden, some like

    <form [formGroup]="form">
        <select type="number"
        class="form-control" formControlName="Id" >
           <option hidden value="null" >Please Select Item</option>
           <option *ngFor="let name of items" 
               <!--just simple hidden if is the value select
                   be carefull!, is not equal use "null" to not add the attrib hidden-->
               [hidden]="form.get('Id').value==name.Id?true:null" 
               type="number" [ngValue]="name.Id">
              {{ name.ItemName }}
             </option>
          </select>
    </form>

See the stackblitz

Update if we has a FormArray

The formArray can be a FormArray of FormControls

  form = new FormGroup({
    array: new FormArray([new FormControl(null), new FormControl(null)])
  });

Or a FormArray of FormGroups

  form = new FormGroup({
    array: new FormArray([
      new FormGroup({
          id:new FormControl()
         }), 
      new FormGroup({
          id:new FormControl()
         }), 
    ])
  });

In any case you need, as usuall when mannage a formArray a getter

  get array() {
    return this.form.get("array") as FormArray;
  }

If is a FormArray of FormControls, you use [hidden]="array.at(i).value==name.Id?true:null"

<form [formGroup]="form">
    <div formArrayName="array">
        <div *ngFor="let control of array.controls;let i=index">
            <select type="number"
    class="form-control" [formControlName]="i" >
       <option hidden value="null" >Please Select Item</option>
       <option *ngFor="let name of items" 
            [hidden]="array.at(i).value==name.Id?true:null"
            type="number" [ngValue]="name.Id">
          {{ name.ItemName }}
         </option>
      </select>
        </div>
    </div>
</form>

If you use a FormArray of FormGroups use [hidden]="array.at(i).value.Id==name.Id?true:null"

<form [formGroup]="form">
    <div formArrayName="array">
        <div *ngFor="let control of array.controls;let i=index" [formGroupName]="i">
            <select type="number"
    class="form-control" formControlName="Id" >
       <option hidden value="null" >Please Select Item</option>
       <option *ngFor="let name of items" 
             [hidden]="array.at(i).value.Id==name.Id?true:null" 
             type="number" [ngValue]="name.Id">
          {{ name.ItemName }}
         </option>
      </select>
        </div>
    </div>
</form>

NOTE: The stackblitz is updated with the three cases

Remove an option once it is selected in previous dropdowns

Here is pure HTML/JS example. Basically on page load each select has same options. When you select something, on other selects this option hides.

---

Related Topics