Multiselect dinâmico com bootstrap

ronierick · Março 2, 2016

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?

gabrieldarezzo · Março 2, 2016

Primeira coisa é a ordem de carregamento dos scripts:

Independente de ser Jquery (pode ser qlq outra lib)

você precisa colocar a ordem assim:

LIB->Plugin->Scripts de utilização de Lib e plugin

Exemplo:

No seu esta invertido, isso pode causar problemas.

Sobre sua duvida no fiddle tem um script parecido com o seu.

http://jsfiddle.net/StephenEdmondson/TR49m/4/

Entrar

Arquivado

Multiselect dinâmico com bootstrap

Recommended Posts

ronierick 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante