Multiselect with option groups not working

Topic: Multiselect with option groups not working

Adam Stapleton pro asked 6 years ago

When using a multi-select with option groups in it it doesn't work. It selects items at the incorrect indexes. This causes item 1 and 2 to be selected once mdb renders the select.

<select id="Test" name="Test" multiple class="mdb-select colorful-select dropdown-primary" searchable="Search...">
  <optgroup label="Group A">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
  </optgroup>
  <optgroup label="Group B">
    <option value="4">Item 4</option>
    <option value="5" selected>Item 5</option>
    <option value="6">Item 6</option>
  </optgroup>
  <optgroup label="Group C">
    <option value="7">Item 7</option>
    <option value="8">Item 8</option>
    <option value="9">Item 9</option>
  </optgroup>
  <optgroup label="Group D">
    <option value="10" selected>Item 10</option>
    <option value="11">Item 11</option>
    <option value="12">Item 12</option>
  </optgroup>
</select>

Clearly that's incorrect. Any ideas how to fix this issue?

Add comment

Adam Stapleton pro answered 6 years ago

2 0 Best answer

I've fixed it for you. You need to update the following lines to match the code below. Starting at line 20516.

from this:

if (multiple) {
  $select.find('option:selected:not(:disabled)').each(function () {
    var index = $(this).index();

    toggleEntryFromArray(valuesSelected, index, $select);
    options.find('li').eq(index).find(':checkbox').prop('checked',true);
  });
}

to this:

if (multiple) {
  $select.find('option:selected:not(:disabled)').each(function (i, e) {
    var index = $select.find('option').index(e);

    toggleEntryFromArray(valuesSelected, index, $select);
    options.find('li.active').find(':checkbox').prop('checked',true);
  });
}

Hopefully that allows this fix to be released to others more quickly.

Mikołaj Smoleński staff commented 6 years ago

Thanks a lot for Your remarks!

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 0 Best answer

Hi Adam,

Thanks for Your remarks. Your issue was added to our list of bugs and we'll try to fix it as soon as possible. For this moment I suggest not to use select with option groups. The other selects are working correctly.

Best Regards

Add comment

ckidd@prochemwater.com pro answered 6 years ago

0 0 Best answer

I am still experiencing similar issues to what is described here with the tag when using multi-select (as described in this topic). I am using MDB Pro 4.7.4 and would love a solution for a current project.

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 0 Best answer

Hi there,

It was fixed almost a year ago. Could You udpate Your project to one of the latest versions?

Best regards

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

Adam Stapleton

Pro User

66Support score
6Questions 11Answers

0Snippets likes 0Snippets