Skip to content

Instantly share code, notes, and snippets.

@italoveloso

italoveloso/multi-select.html

Created March 28, 2017 15:04
Show Gist options
  • Save italoveloso/c558f15e1c5bce44895b5ed9176e3f76 to your computer and use it in GitHub Desktop.
Save italoveloso/c558f15e1c5bce44895b5ed9176e3f76 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
multi-select.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.css">
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js'></script>
<style type="text/css">
.ms-drop ul>li.multiple {
width: 45% !important;
margin-left: 15px;
}
.ms-drop ul>li.group {
margin-top: 5px;
}
</style>
</head>
<body>
<select multiple="multiple" style="width: 500px;">
<optgroup label="CENTRO">
<option value=''>Cabral</option>
<option value=''>Centro</option>
<option value=''>Cidade Nova</option>
<option value=''>Cristo Rei</option>
<option value=''>Frei Serafim</option>
<option value=''>Ilhotas</option>
<option value=''>Macaúba</option>
<option value=''>Mafuá</option>
<option value=''>Marquês</option>
<option value=''>Monte Alegre</option>
<option value=''>Monte Castelo</option>
<option value=''>Monte Verde</option>
<option value=''>Morro da Esperança</option>
<option value=''>Nossa Senhora das Gracas</option>
<option value=''>Parque Brasil</option>
<option value=''>Piçarra</option>
<option value=''>Pio XII</option>
<option value=''>Pirajá</option>
<option value=''>Porenquanto</option>
<option value=''>Redenção</option>
<option value=''>São Pedro</option>
<option value=''>Três Andares</option>
<option value=''>Vermelha</option>
<option value=''>Vila Operária</option>
<option value=''>Santa Maria da Codipe</option>
</optgroup>
<optgroup label="ZONA NORTE">
<option value=''>Acarape</option>
<option value=''>Aeroporto</option>
<option value=''>Água Mineral</option>
<option value=''>Alto Alegre</option>
<option value=''>Alvorada</option>
<option value=''>Bom Jesus</option>
<option value=''>Buenos Aires</option>
<option value=''>Cidade Industrial</option>
<option value=''>Embrapa</option>
<option value=''>Itaperu</option>
<option value=''>Mafrense</option>
<option value=''>Matadouro</option>
<option value=''>Matinha</option>
<option value=''>Memorare</option>
<option value=''>Mocambinho</option>
<option value=''>Nova Brasília</option>
<option value=''>Olarias</option>
<option value=''>Poti Velho</option>
<option value=''>Primavera</option>
<option value=''>Real Copagre</option>
<option value=''>Risoleta Neves</option>
<option value=''>Santa Rosa</option>
<option value=''>São Francisco</option>
<option value=''>São Joaquim</option>
</optgroup>
<optgroup label="ZONA SUL">
<option value=''>Alegria</option>
<option value=''>Angelim</option>
<option value=''>Areias</option>
<option value=''>Bela Vista</option>
<option value=''>Brasilar</option>
<option value=''>Catarina</option>
<option value=''>Distrito Industrial</option>
<option value=''>Esplanada</option>
<option value=''>Lourival Parente</option>
<option value=''>Morada Nova</option>
<option value=''>Parque Jacinta</option>
<option value=''>Parque Piauí</option>
<option value=''>Parque São João</option>
<option value=''>Parque Sul</option>
<option value=''>Portal da Alegria</option>
<option value=''>Porto Alegre</option>
<option value=''>Promorar</option>
<option value=''>Saci</option>
<option value=''>Santa Cruz</option>
<option value=''>Santa Fé</option>
<option value=''>Santa Luzia</option>
<option value=''>Santo Antônio</option>
<option value=''>São Lourenço</option>
<option value=''>Tabuleta</option>
<option value=''>Triunfo</option>
</optgroup>
<optgroup label="ZONA LESTE">
<option value=''>Aroeiras</option>
<option value=''>Campestre</option>
<option value=''>Fátima</option>
<option value=''>Horto florestal</option>
<option value=''>Ininga</option>
<option value=''>Jóquei Clube</option>
<option value=''>Morada do Sol</option>
<option value=''>Morros</option>
<option value=''>Noivos</option>
<option value=''>Pedra Mole</option>
<option value=''>Piçarreira</option>
<option value=''>Planalto Uruguai</option>
<option value=''>Porto do Centro</option>
<option value=''>Recanto das Palmeiras</option>
<option value=''>Samapi</option>
<option value=''>Santa Isabel</option>
<option value=''>Santa Lia</option>
<option value=''>São Cristovão</option>
<option value=''>São João</option>
<option value=''>Satélite</option>
<option value=''>Socopo</option>
<option value=''>Tabajaras</option>
<option value=''>Uruguai</option>
<option value=''>Vale do Gavião</option>
<option value=''>Vale Quem Tem</option>
<option value=''>Verde Lar</option>
<option value=''>Zoobotânico</option>
</optgroup>
<optgroup label='ZONA SUDESTE'>
<option value=''>Beira Rio</option>
<option value=''>Bom Princípio</option>
<option value=''>Colorado</option>
<option value=''>Cuidos</option>
<option value=''>Cumprida</option>
<option value=''>Dirceu</option>
<option value=''>Extrema</option>
<option value=''>Itararé</option>
<option value=''>Gurupi</option>
<option value=''>Livramento</option>
<option value=''>Novo Horizonte</option>
<option value=''>Parque Ideal</option>
<option value=''>Parque Poti</option>
<option value=''>Redonda</option>
<option value=''>Renascença</option>
<option value=''>São Paulo</option>
<option value=''>São Raimundo</option>
<option value=''>São Sebastião</option>
<option value=''>Tancredo Neves</option>
<option value=''>Todos os Santos</option>
<option value=''>Usina Santana</option>
<option value=''>Verdecap</option>
</optgroup>
</select>
<script>
$("select").multipleSelect({
filter: true,
multiple: true
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment