Selected Option should be first

[rushbhshah1110]

Is there any way by which i am able to make user selected option to come at top place in drop down.
Because if i have lots of values in drop down, and user will select any of these.
After that he might not able to remember that which options he had selected.
So if anyway i am able to put selected options on top of list,user will easily uncheck those.

[slobber]

enableClickableOptGroups

[rushbhshah1110]

this option is for selecting group of options.
i want my selected options should come to first place.

[slobber]

https://github.com/slobber/bootstrap-multiselect
add a boolean option value "selectTop", if set "$('#example-multiple-selected').multiselect({selectedTop:true});", you will see you wanted

[Tyf0x]

I think that what @rushbhshah1110 wants is to dynamically move the multiselect options (the <li>) that are selected (at init and runtime).

The issue is that we also need to add a system to remember their initial position too, so they can go back there once deselected. This will require a bit of code.

I might have a look, but no promises.

[slobber]

i think dynamically moving can cause confusion. if the list is very long, check one option at bottom, then it move to top, user can't imagine that why option disappeared.
So, i think just top selected options at init is enough. Like wordpress, when edit one post, the post‘s categories is at top of categories list.

[Tyf0x]

Yes, you are definitely right.

If however we ever decide to make the change to support runtime re-ordering, visual feedback would be key.

Hopefully @rushbhshah1110 can give us feedback on the solution you provided?

[rushbhshah1110]

First of all, i appriciate your support but i am not able to find any option $('#example-multiple-selected').multiselect({selectedTop:true}) .
There is not any option available named selectedTop so how to set it true?

Another thing is i am not worried about my order of position so if all my options will be disorder then it will be ok for me.

@slobber is right that user experience will be bad when he clicks and option will be disappeared.
so i can do that on open event of drop down so when user will select any option it won't go any where but next time when user will open that drop down user can see all selected options at top and if user will deselect any option then i don't need to change its position. So it will be good if i will get any idea or snippet of achieving this.

And my another question is can i make any option comes always at first place.
If it can happen it will be good for me as i want my user's choice to come always first in list and rest of options at below it.

[Tyf0x]

First of all, i appriciate your support but i am not able to find any option $('#example-multiple-selected').multiselect({selectedTop:true}) .
There is not any option available named selectedTop so how to set it true?

This is code changes @slobber made on his own clone repository here. This is not part of the current version of the original bootstrap-multiselect.

@slobber is right that user experience will be bad when he clicks and option will be disappeared.
so i can do that on open event of drop down so when user will select any option it won't go any where but next time when user will open that drop down user can see all selected options at top and if user will deselect any option then i don't need to change its position. So it will be good if i will get any idea or snippet of achieving this.

I will give it a try on my repository and give you a link for you to try it out. I still don't know if we want to add it to the master repository as it is a very specific requirement for a very specific need.

And my another question is can i make any option comes always at first place.
If it can happen it will be good for me as i want my user's choice to come always first in list and rest of options at below it.

Not sure to understand, the bootstrap-multiselect checkboxes are by default ordered the same way the original select is. So if you need some options to be at the top, just build your original select this way.

[rushbhshah1110]

I have done selectedTop:true but anything didn't change.

ohh.. about selecting first option is simple thing i need to do. thanx for this.

[slobber]

i think this feature is very useful, people are tired to find which option they selected before, specially in a long list. if set the selected options to top, user can directly find what selected, don't need dynamic move 'li', just show them at top.

[rushbhshah1110]

@slobber yes you are right but i have get code from your repository and set selectedTop : true but it didn't change anything.

[slobber]

i write a demo, please see it.
https://github.com/slobber/bootstrap-multiselect/blob/master/to_rushbhshah1110.html

[Tyf0x]

And here is a link to my implementation here

Usage:

$('#example1').multiselect({
  moveSelectedToTop: true
});

[Tyf0x]

I fixed a bug. JSFiddle

Is it what you were looking for?

[ckrack]

+1

add two options:

• one to run at init only (moving selected=selected up)
• one to run at runtime. to keep this fast, only when this is enabled the storage for the initial position is used.
  the storage could be a selector for use with $.insertAfter(), but this will fail when the sibling is moved, too.
  so, option-elements need to store: selectorAfter and moved.
  if the sibling is moved, look for the siblings stored selector..

[ajeethkumar]

Hi,

I am trying to use moveSelectedToTop: true and it does not seem to be working? what could be wrong?

[fgourdeau]

+1

[maimaranmurugesan]

Hi,
I want to customize the checkbox, Is there any option to add < label > or < span > after the check box ?

[sivaganeshic]

Can I get solution for this problem. Now I am facing the same problem. Someone please assist me

[JubeiQC]

I need a solution too please.

[28pankaj]

I am also facing the same problem. please, guys, you have solutions for this.

[Organizer21]

+1 is this really not formally supported 5 years on?

[FSGCorp]

I take it this never made it to the official multiselect repository since "moveSelectedToTop: true" doesn't work?

[jorgelf]

In case anyone is still interested in this functionality, I made a small and easy to use plugin that could fit your needs. It shows the selected items in an additional optgroup listed first upon opening the dropdown. It's reloaded only when opening the dropdown, so the end user shouldn't be much confused when using it. You can check it here: https://github.com/jorgelf/bootstrap-multiselect-showselected

If people find it useful, maybe its functionality could be integrated with bootstrap-multiselect itself at some point.

[davidstutz]

Thanks everyone for providing fixes and plugins to achieve the requested functionality. I considered implementign this multiple times and everytime I was facing issues with arranging this functionality with all the other features (filtering, option groups etc.). So, I decided not to officially integrate this and instead refer to @jorgelf plugin in the documentation.