Binding two dropdowns based on user selection

[BONDbATIFParticipant]

Hi Team ,
Need your help .
I am facing problem in binding dropdownlist control.
I have two dropdown control in UI .If User is selecting value form First dropdown ,selected value should remove from second dropdown vice versa .
I written below code but i am not getting consistence result .
processColorArr : It will have my original data array(object) (value and lable)
processColorArr2: We will delete and add the object based on user selected (second dropDown)
processColorArr1: We will delete and add the object based on user selected (first drop down)

let me know if any clarification required .
Below are my code :

` twoColorPrintP1Select(event) {
let p1OnSelect = event.args.item.value;
let p1Index=event.args.item.index;
let colorName: any;
this.processColor1 = p1OnSelect;

if (!this.isTwoColorPrintOpened) {
this.processColorArr.forEach((item) => {
let itemVal = item[“value”];
let isThere=this.processColorArr2.some(items => items.value === itemVal);
if (!isThere) {
colorName = item;
this.twoColorPrintDwl2.addItem(colorName);
this.processColorArr2.push(colorName);
}
});
this.twoColorPrintDwl2.removeAt(p1Index);
// let p2index = this.processColorArr2.indexOf(p1OnSelect);
let p2Arryindex = this.processColorArr2.findIndex(item => item.value === p1OnSelect);
this.processColorArr2.splice(p2Arryindex, 1);
}
}

twoColorPrintP2Select(event) {
let p2OnSelect = event.args.item.value;
this.processColor2 = p2OnSelect;
let p2Index=event.args.item.index;
let colorName: any;
if (!this.isTwoColorPrintOpened) {
this.processColorArr.forEach((item) => {
let itemVal = item[“value”];
let isThere=this.processColorArr1.some(items => items.value === itemVal);
if (!isThere) {
colorName = item;
this.twoColorPrintDwl1.addItem(colorName);
this.processColorArr1.push(colorName);
}
});
this.twoColorPrintDwl1.removeAt(p2Index);
let p1ArrayIndex = this.processColorArr1.findIndex(item => item.value === p2OnSelect);
this.processColorArr1.splice(p1ArrayIndex, 1);
}
}`

[Peter StoevKeymaster]

Hi,

We have such example about ComboBox: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/cascadingcombobox.htm?light. The same code can be applied for DropDownList, too.

Regards,
Peter

[BONDbATIFParticipant]

Hi Peter,

Thanks for you reply .
This is not my case .
Just take a example
I have two drop down where 0 index is selected one.
First drop down having [{label:a,value:A},{label:b,value:B},{label:c,value:C}]
second drop down having [{label:d,value:D},{label:b,value:B},{label:c,value:C}]

Suppose if user is selecting b form second drop down ,then b should go out of first drop down and d should add to first drop down
likewise if user is selecting c from first drop down , then c should go out of second drop down and a should add .

[Peter StoevKeymaster]

Then you can use removeItem, updateItem and addItem methods. For reference, check the DropDownList’s API documentation. We have examples for each of these methods.

Regards,
Peter

[Author]

Posts