Multiselect dinâmico com bootstrap
Pessoal, boa tarde.
estou com um grande problema. tenho um combo de select dinâmico que é a seguinte ordem:
1. Pais
2. UF
3. Cidade
4. Bairro
Essas informações são carregadas do MYSQL. Considerando que seja uma select dinâmico, preciso que o campo bairro se torne um "multiselect". Para selecionar vários bairros de uma vez.
meu código é este:
COMBO.JS
jQuery(document).ready
(
function()
{
/*
* Chamamos aqui a função que vai controlar os campos.
* Desta forma, caso você precise repetir o combo dinâmico
* basta trocar os ID's dos SELECT's
*/
comboDinamico("pais", "estado", "cidade", "bairro");
// suposição de segundo bloco de selects
// comboDinamico("pais_cliente", "estado_cliente", "cidade_cliente", "bairro_cliente");
}
);/*
* função para carregar uma lista dinâmica
*/
comboDinamico = function(pais, estado, cidade, bairro) {
/*
* Variáveis que precisamos pegar
* Usamos getElementById() pois é assim que conseguiremos
* passar o elemento por variável para jQuery
*/
var pais = document.getElementById(pais);
var estado = document.getElementById(estado);
var cidade = document.getElementById(cidade);
var bairro = document.getElementById(bairro);
/*
* Carregamos a lista automaticamente quando a página carrega
*/
$(pais).load('localizacoes.php?tipo=pais');
/*
* Populamos o combo dos estados quando trocamos um valor no pais
* Os próximos blocos serão similares quanto à validação pelo valor igual à zero
*/
$(pais).change(
function() {
if($(this).val() == 0) {
alert('Você precisa informar um PAÍS!');
$(this).focus();
} else {
$(estado).load('localizacoes.php?tipo=estado&pais=' + $(this).val());
}
}
);
/*
* Populamos o combo das cidades quando trocamos um valor no estado
*/
$(estado).change(
function() {
if($(this).val() == 0) {
alert('Você precisa informar o ESTADO!');
$(this).focus();
} else {
$(cidade).load('localizacoes.php?tipo=cidade&estado=' + $(this).val());
}
}
);
/*
* Populamos o combo dos bairros quando trocamos um valor na cidade
*/
$(cidade).change(
function() {
if($(this).val() == 0) {
alert('Você precisa informar a CIDADE!');
$(this).focus();
} else {
$(bairro).load('localizacoes.php?tipo=bairro&cidade=' + escape($(this).val()));
}
}
);
/*
* Uma validação simples só para garantir que não escolher um valor nulo
*/
$(bairro).change(
function() {
if($(this).val() == 0) {
alert('Você precisa informar o BAIRRO!');
$(this).focus();
} else {
return true;
}
}
);
}TESTE.PHP
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Ronierick Holanda">
<link rel="stylesheet" href="docs/css/bootstrap-3.3.2.min.css" type="text/css"/>
<script type="text/javascript" src="docs/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="docs/js/bootstrap-3.3.2.min.js"></script>
<script src="combo.js"></script>
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="dist/css/bootstrap-multiselect.css" type="text/css"/>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#bairro').multiselect({
maxHeight: 10000
});
});
</script>
<form action="" method="post">
<h1>Localizações</h1>
<label><span>País:</span>
<select name="pais" id="pais"></select>
</label>
<label><span>Estado:</span>
<select name="estado" id="estado"><option value="0">--Primeiro o País--</option></select>
</label>
<label><span>Cidade:</span>
<select name="cidade" id="cidade"><option value="0">--Primeiro o Estado--</option></select>
</label>
<label><span>Bairro:</span>
<select name="bairro" id="bairro">
<option multiple="multiple" name="multiselect[]">--Primeiro a Cidade--</option></select>
</label>
<br />
<label><input type="submit" value="Procurar" />
</form>
</body>
</html>Alguém poderia me ajudar?
Discussão (1)
Carregando comentários...