Sou novo em programação e estou com a seguinte situação. Tenho um select2, com algumas cidades selecionadas. Como posso fazer para que quando eu clicar na minha URL e apertar o enter, ele não limpe essas cidades selecionadas?
Segue meu código abaixo. Essa funcionalidade está em branco no meu código, pois não tenho a menor ideia de como fazer. Não quero fazer isso clicando em um botão, pois já sei fazer. O que eu preciso é que ele não limpe as minhas cidades selecionadas quando eu seleciono a URL e aperto enter. Isso é possível de se fazer? Pq quero limitar essa consulta em 5 cidades, caso ultrapasse, ele me retornará uma msg de erro e as cidades permanecerão selecionadas. Isso me facilitaria em não ter que selecionar novamente as cidades.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cidades</title>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.css" integrity="sha512-Ty5JVU2Gi9x9IdqyHN0ykhPakXQuXgGY5ZzmhgZJapf3CpmQgbuhGxmI4tsc8YaXM+kibfrZ+CNX4fur14XNRg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="card card_primary">
<div class="card-body">
<select class="js-example-basic-multiple form-control" id="cboCidades" multiple="multiple" style="width: 100%;">
</select>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2({
language: "pt-BR",
});
});
const allCidades = [];
$( function() {
$.ajax({
type: 'GET',
url: 'localhost:5000/cidades',
success: function (data) {
$.each(data, function(index, element) {
$('#cboCidades').append('<option value="'+element.cidade+'">'+element.cidade+'</option>')
allCidades.push({'cidade':element.cidade});
});
}
});
});
</script>
</body>
</html>
Grato quem puder me ajudar.
OBS: Não uso PHP.