Topic: Multiselect element without disabled option has default selection, which is wrong

Juric free asked 5 years ago


Dear support,I have just mentioned, that if I don't use a default disabled option in multiselect element, the first option will be selected as default, which is wrong, in my opinion. So if we have

<select id="idSelect" class="mdb-select md-form colorful-select dropdown-primary" multiple searchable="Search here.." multipletype="OR">
      <!-- <option value="" disabled selected>Choose your country</option> -->
      <option value="USA">USA</option>
      <option value="Germany">Germany</option>
      <option value="France">France</option>
      <option value="Poland">Poland</option>
      <option value="Japan">Japan</option>
    </select>
    <label>Label example</label>
    <button class="btn-save btn btn-primary btn-sm">Save</button>

the first option (USA) is selected and shown, which is not wanted. Why?Thanks and regards


Sebastian Kaczmarek staff answered 5 years ago


Actually, it is not selected, it's just displayed as it was - but it's not. The reason is simple: something has to be displayed on the <select> as the first option. When you delete the first option (which is typically used as placeholder) then the next one is being displayed as the first. But it doesn't mean that it's actually selected, the value of the Multiselect is empty. Look at my snippet for the demo: https://mdbootstrap.com/snippets/jquery/s-kaczmarek/393257


Juric free answered 5 years ago


Ok, yes, sure. Best regards


Juric free answered 5 years ago


Hi, sure, I would suggest, that if no selection is done yet, the user sees nothing at all.

Cause if I want as a webdeveloper, that user sees something I can always add a default selected option. In your example it is

<option value="" disabled selected>Choose your country</option>

Regards


Sebastian Kaczmarek staff commented 5 years ago

I see, thanks for your opinion. At the moment you can just put a blank <option> with no text inside it as the first option so this will emulate the behavior you described.


Juric free answered 5 years ago


Thanks for replying.

I understand now, that whoen value is not selected. But anyway, in my opinion, it is confusing for the user. How shozld user know, if it was selected or not.

So, I think, if it is wanted by your design, I think it is not the optimal solution


Sebastian Kaczmarek staff commented 5 years ago

Do you have any suggestions? ;)


FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.6.1
  • Device: Desktop
  • Browser: IE 11, Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No