jQuery UI Widgets Forums Getting Started Binding two dropdowns based on user selection

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 5 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • BONDbATIF
    Participant

    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);
    }
    }`

    • This topic was modified 5 years, 9 months ago by  BONDbATIF.

    Peter Stoev
    Keymaster

    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


    BONDbATIF
    Participant

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

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.