How to set both value and name in multiselect?


Topic: How to set both value and name in multiselect?

jfkaese pro premium priority asked 7 months ago

I am wanting to set the name and value of each select option as different values programmatically.

I am using: (docs here)

const multiSelect = document.querySelector('#multiSelection');
const multiSelectInstance = mdb.Select.getInstance(multiSelect);
multiSelectInstance.setValue(['3', '4', '5']);

However, this sets the name and value as the same value.


jfkaese pro premium priority answered 7 months ago

Sorry all I was looking at this wrong. I was trying to use multiSelectInstance.setValue to create the options however this is only to set the selections.

I ended up using:

const departments = [{ID: 1, Name: "Sales"},{ID: 2, Name: "Operations"}];    
const departmentsDropdown = document.querySelector("#departmentsDropdown");    
departments.forEach((department) => {
  opt = document.createElement("option");
  opt.value = department.ID;
  opt.textContent = department.Name;
  departmentsDropdown.appendChild(opt);
});

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.8.0
  • Device: PC
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: Yes