Live Search Select Picker

by André Albson

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
<select class="selectpicker" id="funcao" multiple>
  <option value="lider">Líder</option>
  <option value="conhecimento">Para Conhecimentor</option>
  <option value="participante">Participante</option>
</select>
<br><br>
<select class="selectpicker" multiple>
  <option value="lider">Líder</option>
  <option value="conhecimento">Para Conhecimentor</option>
  <option value="participante">Participante</option>
</select>
<br><br>
<select class="selectpicker" multiple>
  <option value="lider">Líder</option>
  <option value="conhecimento">Para Conhecimentor</option>
  <option value="participante">Participante</option>
</select>
<br><br>
<select class="selectpicker" multiple>
  <option value="lider">Líder</option>
  <option value="conhecimento">Para Conhecimentor</option>
  <option value="participante">Participante</option>
</select>

JavaScript

$('select').change(function(){
    var sel = $(this); 
    var data = sel.data('prev'); 
    var val = sel.val();
    var prev; 
    if(data){ prev = data.val; }
    sel.data('prev', {val: val}); 
    disableThis(sel);
    $(sel).nextAll().each(function(){
        if(prev){
            $(this).find("[value='" + prev+ "']").prop("disabled",false);
            $('.selectpicker').selectpicker('refresh');
        }
        $(this).find("[value='" + val + "']").prop("disabled",true);
        $('.selectpicker').selectpicker('refresh');
    });
    $('.selectpicker').selectpicker('refresh');
});

function disableThis(sel){
	var val = sel.val();
  $(sel).children().each(function(){
  	if($(this).val() != val )
      $(this).prop("disabled",true);
  }
  )
}