Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia. Eu tenho uma pesquisa de cidades dependendo das UFs selecionadas. Quando o usuário seleciona uma ou mais UF, o sistema gera uma busca instatania na tabela das cidades com as UFs selecionadas e retorna a resposta por meio de um Response::json. Para fazer essa busca instatania e anexar as cidades selecionadas no select das UFs eu utlizo um script em JS.
Segue o JS para a busca.
$('select[id=uf]').change(function () { // ativa a função quando é selecionado uma UF pelo id = uf
var uf = $(this).val(); // recebe o valor da UF
$.get('/get-cidades', {uf : uf}, function (busca) { // redireciona para o controller do sistema e recupera as cidades
$('select[name=cidades]').empty(); // procura o campo com o name = cidades
$.each(busca, function (key, value) {
$('select[name=cidades]').append('<option value=' + value.id + '>' + value.name + '</option>'); // anexa os options no select das cidades
});
// tentei anexar a classe do multiselect aqui
});
});
A questão é que o campo das cidades é de multipla escolha, então para não deixar o campo com o estilo padrão do HTML, eu utilizo uma classe do jquery. Quando incluo a classe no campo, os valores que antes eram listados corretamente no select da cidades, não aparecem mais na tela.
Classe jquery.$('#cidades').multiselect({
numberDisplayed: 0,
includeSelectAllOption: true,
});
Eu também tentei anexar a classe do multiselect onde identifiquei no JS, foi onde consegui mostrar as cidades dentro da classe, porém com 1 erro, ele só leva em consideração a minha primeira escolha, exemplo: seleciono UF SC, filtra as de SC dentro da classe corretamente, mas se em seguinda eu selecionar a UF de RS, ainda continua mostrando as de SC e não mostra a de RS. Mas caso eu retirar a classe, filtra tudo corretamente..
Desde já agradeço.Use seletores diferentes para os multselects
$('#seletor1').multiselect();
$('#seletor2').multiselect();/profile/213374-douglas-juli%C3%A3o/?do=hovercard" data-mentionid="213374" href="/profile/213374-douglas-juli%C3%A3o/" rel="">@Douglas Julião, o problema não é linkar os 2 campos de select com o jquery, é retornar as cidades filtradas pela UF no campo que está com o jquery.
tenta fazer assim então:
$.get('/get-cidades', {uf : uf}, function (busca) { // redireciona para o controller do sistema e recupera as cidades
var selectCidades = $('select[name=cidades]');
selectCidades.empty(); // procura o campo com o name = cidades
var options = '';
$.each(busca, function (key, value) {
options += '<option value=' + value.id + '>' + value.name + '</option>';
});
selectCidades.html(options);
selectCidades.multiselect();
});
O caramba não sei se tinha campos antes, se tiver usa append mesmoFazendo desse modo, eu encontro um problema que havia ocorrido antes. Ele retorna os dados para o select com o jquery corretamente, porém se eu vou utilizar outra busca, exemplo: Selecionei SC, filtra os casos de SC aí vou mudar para RS, ele continua filtrando os casos de SC.
se o seu select cidade estiver com o change, deixa desse jeito então:
//TROCA ISSO
$('select').change(function(){});//POR ISSO
$('select').on('change',function(){});
Acabaram minhas idéias rsrs... boa sorte!!Sem sucesso cara, vou continuar tentando e procurando..
/profile/213374-douglas-juli%C3%A3o/?do=hovercard" data-mentionid="213374" href="/profile/213374-douglas-juli%C3%A3o/" rel="">@Douglas Julião, me falaram que pode ser o append, que devo mudar para appendChild, mas ocorre erro nos logs do console, pois appendChild é uma função apenas para DOM. Sabe algo?
No caso como você está usando jQuery deve ser o appendTo(). mas é estranho, você pode tentar com esses 3:
$('select[name=cidades]').html('<option></option>');
$('<option></option>').appendTo('select[name=cidades]');
$('select[name=cidades]').append('<option></option>');
tentar usar o change como delegation tipo:
$('#container-do-select').on('change','seu-seletor-aqui',function(){
//executa seu evento
})Nenhum resultado
Ainda n entendi o objectivo do uso do multiselect na real.
Seria selecionar uma cidade a partir de um estado?
Precisa de + de 1 ajax pra isso não...
Se liga no Js-Vanilla:
[http://gabrieldarezzo.github.io/desafiosInternos/select/index.html](http://gabrieldarezzo.github.io/desafiosInternos/select/index.html)
Ou Versão jQuery
[http://gabrieldarezzo.github.io/desafiosInternos/select/jquery.html](http://gabrieldarezzo.github.io/desafiosInternos/select/jquery.html)
Ouuuuuuuuuu....
Seria selecionar +1 de um estado ao mesmo tempo ?
Se você não está se dando bem com o plugin jquery, opções é q não faltam...
Opção:
[https://select2.github.io/](https://select2.github.io/)
Outra Opção:
[https://harvesthq.github.io/chosen/](https://harvesthq.github.io/chosen/)O objetivo de utilizar o muliselect é que você pode selecionar mais de uma cidade. O problema ocorre apenas quando vou estilizar o campo com uma classe do jquery, aí os dados que antes eram retornados para o campo sem o estilo, não são mais retornados.
/profile/213374-douglas-juli%C3%A3o/?do=hovercard" data-mentionid="213374" href="/profile/213374-douglas-juli%C3%A3o/" rel="">@Douglas Julião, tentei agora com a classe do select2 que o cara passou e funcionoou
Que bom man, ainda bem né :)
Por acaso você conhece outras classes para multiselect? Essa do select2 eu não gostei muito, pois quando seleciona uma opção ele fica marcando o nome dela e como no meu sistema são várias opção acaba ficando feio.
No próprio site do jQuery,você pode pesquisar por plugins:
[https://plugins.jquery.com/?s=select](https://plugins.jquery.com/?s=select)
[https://plugins.jquery.com/?s=mult+select](https://plugins.jquery.com/?s=mult+select)
Tenta procurar por la.Vou utilizar https://semantic-ui.com/ . Valeu pela ajuda pessoal.
Bom, acabei "Resolvendo" aquela minha primeira dúvida com o multiselect do jQuery. Toda vez que o usuário seleciona uma opção, ele destroy o multiselect, joga os options e em seguida ativa novamente um outro multiselect.
Código ficou assim.
$('select[name=uf]').on('change', function () { // ativa quando selecionar uma UF
$('select[name=comarca_id]').multiselect('destroy'); // destroy o multiple select existente
var uf = $(this).val();
$.get('/judicial/get-cidades/' + uf, function (busca) { // buscando as cidades pela rota get-cidades + uf
$('select[id=comarca_id]').empty(); // esvaziando os options das comarcas
$.each(busca, function (key, value) {
$('select[id=comarca_id]').append('<option value=' + value.name + '>' + value.name + '</option>'); // inserindo os options com as cidades
});
$('select[name=comarca_id]').multiselect(); // ativando o multiselect no campo após fazer todo o carregamento das cidades
}); });