Topic: Multiple select set label / value to "All selected" rather than a list of the options

AlbertMN free asked 4 years ago


I'm using the "Multiple select" component in MDB Pro, and when all options are selected, the default behavior is that (when the select is not open), it shows a list of the selected values (like this; option x, option x, option x). What I'd like to do is have it say something like "All options selected" when all is selected. I could not find a way to do this, as I could not figure out where the text was set. The documentation on "multiple selects" in the MDB documentation didn't provide any information on this either.

I'd also like to have the option of having all options selected by default. Is this possible?


Mateusz Łubianka staff answered 4 years ago


Hi @AlbertMN,

To have all options selected by default use this code:

    <select class="mdb-select colorful-select dropdown-primary md-form" multiple searchable="Search here..">
          <option value="" disabled selected>Choose your country</option>
          <option value="1" selected>USA</option>
          <option value="2" selected>Germany</option>
          <option value="3" selected>France</option>
          <option value="4" selected>Poland</option>
          <option value="5" selected>Japan</option>
        </select>
        <label class="mdb-main-label">Label example</label>
        <button class="btn-save btn btn-primary btn-sm">Save</button>
</select>

Regarding the first question - there is no such functionality built-in. Here you can find support with similar: https://mdbootstrap.com/support/jquery/how-to-customize-value-to-select-all-option-in-multiselect/

Best,



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: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.15.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: Yes
  • Provided link: No