selecting multiple values (having same value key) but from different group not appear as different

[kartikag01]

groups = [
{label:'Group One',children:[{value:'1'},{value:'2'},{value:'3'}]},
{label:'Group Two',children:[{value:'2'},{value:'2'},{value:'3'}]}
]

onChange giving same index for each 1,2,3 either of Group One or of Group Two i.e 0,1,2 respectively

 handleChange = (option, select) => {
    console.log("() : ", option[0].index);
    console.log("() : ", option.val());
  };

and also when we select multiple values (same) but different group, then it not shows on button label and nor it gives those selected value from this.refs.view.refs.multiselect.selectedOptions

[skratchdot]

@kartik01 - I think this is just standard HTML form stuff, but I haven't updated the docs appropriately. From the https://davidstutz.github.io/bootstrap-multiselect/#methods docs, I can see that you can pass in a "label" as well. I think you want your groups to look like:

groups = [
{label:'Group One',children:[{label: '1', value:'g1-1'},{label: '2', value:'g1-2'},{label: '3', value:'g1-3'}]},
{label:'Group Two',children:[{label: '1', value:'g2-1'},{label: 'g2-2', value:'2'},{label: '3', value:'g2-3'}]}
]

That way, to the end user, the form will look like you are selecting "2" under "Group Two", but what's returned in the data would be "g2-2" (so you know which group it came from. Does that make sense? (this is untested code, but would be the same way a standard <form /> with <option> and <optgroup> tags would work.

[kartikag01]

@skratchdot thanks. its solved my problem.