Problemas com classe de multiselect

[Luiz Gustavo Costa Ceolin 8]

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.

[Luiz Gustavo Costa Ceolin 8]

@Rapadura, eu já consigo linkar o jquery no select, minha questão é que quando eu estou com o select já com o jquery, os dados que eram para serem retornados dentro do select, não são recuperados. Vou colocar uma imagem da situação.

Aqui seleciono os 2 estados e são retornados no select os valores corretamente, porém o select das cidades está sem o jquery

 

Agora o campo das cidades com o jquery , porém não é retornado nenhuma cidade.

[Douglas Julião 34]

Use seletores diferentes para os multselects

$('#seletor1').multiselect();
$('#seletor2').multiselect();

[Luiz Gustavo Costa Ceolin 8]

@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.

[Douglas Julião 34]

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 mesmo

[Luiz Gustavo Costa Ceolin 8]

Fazendo 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.

[Douglas Julião 34]

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!!

[Luiz Gustavo Costa Ceolin 8]

Sem sucesso cara, vou continuar tentando e procurando..

[Luiz Gustavo Costa Ceolin 8]

@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?

[Douglas Julião 34]

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
})

 

[Luiz Gustavo Costa Ceolin 8]

Nenhum resultado 

[gabrieldarezzo 255]

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

 

Ou Versão jQuery

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/

 

Outra Opção:

https://harvesthq.github.io/chosen/

[Luiz Gustavo Costa Ceolin 8]

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.

[Luiz Gustavo Costa Ceolin 8]

@Douglas Julião, tentei agora com a classe do select2 que o cara passou e funcionoou 

[Douglas Julião 34]

Que bom man, ainda bem né :)

[Luiz Gustavo Costa Ceolin 8]

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.

[Douglas Julião 34]

No próprio site do jQuery,você pode pesquisar por plugins:

https://plugins.jquery.com/?s=select

https://plugins.jquery.com/?s=mult+select

 

Tenta procurar por la.

 

[Luiz Gustavo Costa Ceolin 8]

Vou utilizar https://semantic-ui.com/ . Valeu pela ajuda pessoal.

[Luiz Gustavo Costa Ceolin 8]

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
  });  });