I’m trying to use smart select with multiple cascading options. I have a select option for states and it must feed the smart select. When changing the state it does not keep the selected cities. Can someone help me ?
My simple code:
$("#EnviarAnuncio").on(‘click’,function(){
var login = localStorage.getItem(“login”);
var idanuncio = $("#idanuncio").val();
var titulo = $("#TituloAnuncio").val();
var descricaoAdvogado = $("#DescricaoAnuncio").val();
var oabNumero = $("#oabNumero").val();
var oabEstado = $("#oabEstado").val();
var banco = $("#banco").val();
var agencia = $("#agencia").val();
var conta = $("#conta").val();
var operacao = $("#operacao").val();
var cidade = $("#cidade").val();
var estado = $("#CadEstado").val();
var cidade = $("#CadCidade").val();
var cep = $("#CadCEP").val();
var foto = $("#nomeUpload").text();
var carteiraOab = $("#nomeUploadOab").text();
var carteiraOabVerso = $("#nomeUploadOabVerso").text();
var atuacao = app.smartSelect.get(’.smart-select’).$selectEl.val();
app.dialog.preloader('Salvando Cadastro...','orange');
$.ajax({
type: 'POST',
data: {titulo: titulo, idanuncio: idanuncio, login:login, cep: cep ,cidade:cidade, estado: estado ,oabNumero:oabNumero,oabEstado:oabEstado, carteiraOab: carteiraOab, carteiraOabVerso: carteiraOabVerso,descricaoAdvogado:descricaoAdvogado, banco:banco,agencia:agencia,conta:conta,operacao:operacao, foto: foto, atuacao: atuacao, valida:'nDALKIngFUlACKNoTRYpIgiNGSTANk'},
url:urlPoint+ 'insert-data.php',
crossDomain: true,
success: function (resposta) {
if (resposta == 0) {
app.dialog.close();
app.views.main.router.navigate('/inserido/');
}
if (resposta == 1) {
app.dialog.close();
}
},
error: function (erro) {
app.dialog.close();
}
});
});
}
}
//my function
function listaCidades(){
regiaoEstado=$("#selectEstado").val();
$.ajax({
type: 'POST',
data: {regiao:regiaoEstado, chave:'gAmLekowDCaemuzTZLJxJDutDCLiFybmyOydznZCpzhduhxTsG'},
url: urlPoint+'get-data.php',
crossDomain: true,
success: function (respost) {
if (respost == 0) {
console.log('Problema com banco');
}
if (respost !== 0) {
$("#listaCidades").html(respost);
}
if (respost == 1) {
console.log('Não tem cidades');
app.dialog.alert('Não existem cidades cadastradas para esse Estado', '<i class="mdi mdi-alert"></i> Nada encontrado');
}
},
error: function (erro) {
console.log('Falha ao se comunicar com servidor');
}
});
}
// in the html page
<div class="block">
<select class="minimal" id="selectEstado" name="selectEstado" style="border: none; border:solid 1px #e0dede; border-radius: 5px; padding: 8px 16px;height:50px">
<option value="" disabled="disabled" selected="true" >Selecione o Estado</option>
<option value="Brasil">Todo o Brasil</option>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapá</option>
<option value="AM">Amazonas</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SP">São Paulo</option>
<option value="SE">Sergipe</option>
<option value="TO">Tocantins</option>
</select>
</div>
<div class="block-title" style="color:#000">Clique abaixo para definir a região de atuação</div>
<div class="block">
<a class="item-link smart-select smart-select-init" data-virtual-list="true" data-open-in="popup" data-searchbar="true" data-searchbar-placeholder="Buscar cidades">
<select name="smart-select[]" id="listaCidades" multiple>
</select>
<div class="item-content">
<div class="item-inner">
<div class="item-title" style="color:#000; border:lightgrey 1px solid; padding: 18px; border-radius: 5px;"> Cidades de atuação</div>
</div>
</div>
</a>
</div>