Topic: How Do I Get the Selected Item (Object) of Mdb-select

The Orange Dev House pro asked 6 years ago


How do I get the selected item (object)? The same object passed in 

(selected)="onSelected($event)".

Damian Gemza staff answered 6 years ago


Dear @The Orange Dev House 

The (selected) event returns the whole selected object, so in your example: {value: 1, label: 'America'}.

You can bind this value to some variable, and after clicking some button or something else you can return this variable.

I have provided you with two possibilities, how to achieve your desired behavior.

If you want something else, for now, this is not possible.

Best Regards,

Damian



I am aware of ways to get the selected value. What I want is the selected 'item'. This should return the corresponding object literal: { value: 1, label, 'America', states: [] }.


Damian Gemza staff answered 6 years ago


Dear @The Orange Dev House 

Please note, that our business hours are 7-18 GMT+1. So only between this hours, you'll get the answer on our Support Forum.

Premium supports got the highest priority in replying.

About your problem: Please check our Select Documentation for Reactive Forms get selected value.

Best Regards,

Damian



That does not show what I want. Currently, your sample is setting a module level variable within the handler with the $event object passed in. This is not what I want. 

I want to access the selected item from say a button when it is clicked.

Something like onButtonClicked() {

       const selItem = this.form.get('birth_country_id').selectedItem();

       console.log(selItem );    // Result: {value: 245, label: 'Canada', moreProperty:               'morePropertyValue', ...}

}


The Orange Dev House pro commented 6 years ago

Six hours and no response from your team! And this is a premium account.


Damian Gemza staff answered 6 years ago


Dear @The Orange Dev House 

I don't know if I understood you right, but: do you want to achieve something like this?

.html:

<div class="row">
<div class="col-md-6 mx-auto my-5">
<mdb-select [options]="optionsSelect" (selected)="optionSelect($event)" placeholder="Choose your option" label="Example label"></mdb-select>
<p>selected option value: {{selectedOption.value}}, selected option label: {{selectedOption.label}}</p>
</div>
</div>

.ts:

optionsSelect: Array<any>;
selectedOption: any = {value: '', label: ''};
ngOnInit() {
this.optionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
}

optionSelect(event: any) {
console.log(event);
this.selectedOption = event;
}

Best Regards,

Damian



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.1
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No