Topic: Multiselect element without disabled option has default selection, which is wrong
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
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
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
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 pro premium commented 6 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.
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: 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