Multiselect element without disabled option has default sele

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

Add comment

Sebastian Kaczmarek staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Juric free answered 5 years ago

0 0 Best answer

Ok, yes, sure. Best regards

Add comment

Juric free answered 5 years ago

0 0 Best answer

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.

Add comment

Juric free answered 5 years ago

0 0 Best answer

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? ;)

Add comment

Closed

This topic is closed.

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

Juric

450Support score
12Questions 39Answers 0Snippets