<div class="container">
<h2>Selección Múltiple</h2>
<p>Sin choosen</p>
<select name="select-multiple" data-placeholder="Elige un color" multiple>
  <option value="azul">Azul</option>
  <option value="amarillo">Amarillo</option>
  <option value="blanco">Blanco</option>
  <option value="gris">Gris</option>
  <option value="marron">Marrón</option>
  <option value="naranja">Naranja</option>
  <option value="negro">Negro</option>
  <option value="rojo">Rojo</option>
  <option value="verde">Verde</option>
  <option value="violeta">Violeta</option>
</select>
<p>Con Chosen y las opciones por defecto<p>
<select name="chosen-multiple" class="chosen1" data-placeholder="Elige tus colores" multiple>
  <option value="azul">Azul</option>
  <option value="amarillo">Amarillo</option>
  <option value="blanco">Blanco</option>
  <option value="gris">Gris</option>
  <option value="marron">Marrón</option>
  <option value="naranja">Naranja</option>
  <option value="negro">Negro</option>
  <option value="rojo">Rojo</option>
  <option value="verde">Verde</option>
  <option value="violeta">Violeta</option>
</select>
<p>Con Chosen, activado selección máxima en 2<p>
<select name="chosen-maxselected" class="chosen2" data-placeholder="Elige tus colores" multiple>
  <option value="azul">Azul</option>
  <option value="amarillo">Amarillo</option>
  <option value="blanco">Blanco</option>
  <option value="gris">Gris</option>
  <option value="marron">Marrón</option>
  <option value="naranja">Naranja</option>
  <option value="negro">Negro</option>
  <option value="rojo">Rojo</option>
  <option value="verde">Verde</option>
  <option value="violeta">Violeta</option>
</select>
<h2>Selección Única</h2>
<p>Sin Chosen<p>
<select name="select-unique" data-placeholder="Elige un color">
  <option value=""></option>
  <option value="azul">Azul</option>
  <option value="amarillo">Amarillo</option>
  <option value="blanco">Blanco</option>
  <option value="gris">Gris</option>
  <option value="marron">Marrón</option>
  <option value="naranja">Naranja</option>
  <option value="negro">Negro</option>
  <option value="rojo">Rojo</option>
  <option value="verde">Verde</option>
  <option value="violeta">Violeta</option>
</select>
<p>Con Chosen y las opciones por defecto<p>
<select name="chosen-unique" class="chosen1" data-placeholder="Elige un color">
  <option value=""></option>
  <option value="azul">Azul</option>
  <option value="amarillo">Amarillo</option>
  <option value="blanco">Blanco</option>
  <option value="gris">Gris</option>
  <option value="marron">Marrón</option>
  <option value="naranja">Naranja</option>
  <option value="negro">Negro</option>
  <option value="rojo">Rojo</option>
  <option value="verde">Verde</option>
  <option value="violeta">Violeta</option>
</select>
<p>Con Chosen, desactivada la opción de búsqueda y activada la opción de deselección</p>
<select name="chosen-nosearch" class="chosen3" data-placeholder="Elige un color">
  <option value=""></option>
  <option value="azul">Azul</option>
  <option value="amarillo">Amarillo</option>
  <option value="blanco">Blanco</option>
  <option value="gris">Gris</option>
  <option value="marron">Marrón</option>
  <option value="naranja">Naranja</option>
  <option value="negro">Negro</option>
  <option value="rojo">Rojo</option>
  <option value="verde">Verde</option>
  <option value="violeta">Violeta</option>
</select>
</div>

@import url("//harvesthq.github.io/chosen/chosen.css");
body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: #eee;
}

.container {
  width: 80%;
  margin: 1em auto;
  padding: 1em 5%;
  background: #fff;
}
h1, h2 {
  margin-bottom: .5em;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.6em;
}

p {
  margin-bottom: 1em;
}
select {
  width: 250px;
}
.chosen-container {
  width: 250px;
}
.chosen-container-multi .chosen-choices li.search-field input[type="text"]{
  height: 30px !important;
}

jQuery(document).ready(function(){
  
    jQuery.getScript( "//harvesthq.github.io/chosen/chosen.jquery.js" )
        .done(function( script, textStatus ) {
            jQuery(".chosen1").chosen();
            jQuery(".chosen2").chosen({max_selected_options: 2});
            jQuery(".chosen2").bind("chosen:maxselected", function () {alert("Máximo número de elementos seleccionado")});
  	        jQuery(".chosen3").chosen({allow_single_deselect: true, disable_search_threshold: 100});
        })
        .fail(function( jqxhr, settings, exception ) {
             alert("Error");
    });
  
});