Sort by selected items ...

[gradykelly]

Is there any way to sort the list by the items selected? Here is what I am thinking ...

I have a list of 20 items to pick from, I pick 5 from various places in the list and close the select.

When I reopen the select, I would like to see the 5 items picked at the top of the list.

Is this possible?

Great plugin by the way!

Grady

[jkrehm]

I'd bet you could rig something up by listening to the events (either bootstrap-select's or the select's change event) and then sort the select and trigger bootstrap-select's refresh.

The actual implementation has nothing to do with this library, but the concept shouldn't be difficult to implement.

[marianopeck]

I am also interested in this. Did you finally find or do something that you can share? Thanks!

[caseyjhol]

The best method would probably be to utilize bootstrap-select's hidden.bs.select method.

$('select').on('hidden.bs.select', function() {
    // sort select options
    $(this).selectpicker('refresh');
});

[marianopeck]

Hi @caseyjhol

Thanks for the idea. I am trying to do it but I am failing. The problem seems to be that the option of the original list do not get updated with the selected css class at the time hidden.bs.select is fired.

I also tried to apply the sort in the ui elements (and check via hasClass('selected') but...I find no way to get to the bootstrap-select main div out of my select id. Is there a way to get this?

Thanks in advance,

$('#myList').on('hidden.bs.select', function() {
   var withClass = $('#myList').find('option').map(function() {
        if ( $(this).attr('selected') === 'selected' ) {
            return this;
        };
    }).toArray();
    $(this).prepend(withClass);
    $(this).selectpicker('refresh');
});

[marianopeck]

mmm looks like this worked:

$(''#mySelect'').on(''change.bs.select'', function() {

    $(''#mySelect option:selected'').prependTo(''#mySelect'');
    $(this).selectpicker(''refresh'');

});

[marianopeck]

Hi @caseyjhol

The problem I am having now, that I don't know how to do is that when I use data-container="body" I have now way to get the HTML element being the ul of selectpicker associated to the select. I need this in order to make it sortable and a few other things.

Any idea?

[marianopeck]

OK, I ended up doing a hack a setting a CSS class in the select which is something like mySelectID_bootstrapSelect. And so... as select classes are indeed copied to the ul div..then I can do $('.mySelectID_bootstrapSelect'). Of course I would prefer to use that jQuery expression via ID rather than hacking on css class. But at least this workaround works.

@caseyjhol What I don't know is how to put back the item into the correct position once unclicked (deselected)... Because right now, once unclicked it keeps quite "on top" on the list. Not as much "top" as the selected items (just below them), obviously, but not in it's original position either.

Any idea how can I do this?

[marianopeck]

@caseyjhol Any tip on how could I implement the above? It gets complicated even more then I have group options....

Thanks!

[jkrehm]

Personally I think implementation questions should be asked on StackOverflow instead of in an issue.

[marianopeck]

Hi @jkrehm

Thanks for your suggestion. I moved it to SO and sorry for the noise.

[yesworld]

it's my solution.

 <select class="selectpicker" tabindex="-98" multiple data-width="100%">
          <optgroup >
            <option value="1" data-content="<span value='1' class='label label-warning optgroup'>Events</span>" class="optgroup">Events</option>
            <option value="2" data-content="<span value='2' class='label label-warning'>Online</span>">Online</option>
            <option value="3" data-content="<span value='3' class='label label-warning'>Forum</span>">Forum</option>
          </optgroup>
          <optgroup >
            <option value="4" data-content="<span value='4' class='label label-info optgroup'>Events2</span>">Events2</option>
            <option value="5" data-content="<span value='5' class='label label-info'>Online2</span>">Online2</option>
            <option value="6" data-content="<span value='6' class='label label-info'>Forum2</span>">Forum2</option>
          </optgroup>
        </select>

    var sort = [];
    var $Button, $Options;

    $('.selectpicker').selectpicker()
            .on('changed.bs.select', function (event, clickedIndex, newValue, oldValue ) {

      var title = '';

      //Clear result
      $Button.empty();
      for( var i =0; i < sort.length; i++ ){
        var value = sort[i];

        $Options.each( function(){
          var $span = $(this).find('span.label');
          if(value == $span.attr('value')*1){
            title = $span.text() + '  ' + title;
            $Button.prepend( $span.clone() );
            return;
          }
        });
      }

      $('.bootstrap-select button').attr('title', title );
    });

    $Button = $('.bootstrap-select button .filter-option');
    $Options = $('.bootstrap-select ul.dropdown-menu li[data-original-index]');

    //click on options
    $Options.on('click', function( e ){
      var value = $(this).find('span.label').attr('value')*1;
      var flag = false;
      for( var i =0; i < sort.length; i++ ){
        if( sort[i] != value )  continue;
        flag = true;
      }

      if( flag ){
        sort.splice( sort.indexOf(value),1 );
      } else {
        sort.push( value );
      }
    });

[sawajid]

this works for me

  $('.selectpicker').on('changed.bs.select', function(e, clickedIndex, isSelected, previousValue) {
    var selectedOptions = $(this).find('option:selected');
    selectedOptions.detach();
    $(this).prepend(selectedOptions);
    $(this).selectpicker('refresh');
  });