Atualizar select de acordo com a seleção de outro select SPRING MVC e AJAX

Programação
, , ,
#1

Estou tentando criar um form em uma pagina, e dentro desse form eu tenho 2 selects populados com valores do banco, mas eu gostaria que, de acordo com a seleção do primeiro select, o segundo mostrasse apenas os valores relacionados.
Por exemplo: Eu tenho clientes e veiculos, os veiculos pertencem aos clientes, então, quando eu selecionasse o cliente, o select de veiculos mostraria apenas os veiculos do cliente selecionado.
Aqui vai meu codigo

Controller:

@RequestMapping(path= "/getVagas/{codigo}", method = RequestMethod.GET)
	@ResponseBody
	public String findveiculo(@PathVariable(value = "codigo") Long codigo, Model model) {
		List<Veiculo> lista =  veiculoDao.filtraPorCliente(codigo);
		Gson gson = new Gson();
		String listaToString = gson.toJson(lista);
		System.out.println(lista);
		return listaToString.toString();
	}

JSP:

 <select class="form-control" name="cliente" size="1" id="cliente">
	<option>Selecione o cliente</option>
		<c:forEach var="c" items="${clientes}">
				<option value="${c.codigo}">${c.nome}</option>
			</c:forEach>
  </select>

   <select class="form-control" name="veiculo" size="1" id="veiculo">
	<option>Selecione a placa do veiculo</option>
   </select>

AJAX:

$('#cliente').change(function(e){
	var cliente = $('#cliente').val();
		$.ajax({
		    type: "GET",
		    url: "http://localhost:8080/SistemaEstacionamento/vaga/getVagas/" + cliente,
		    success: function(listaVeiculos){
		    	//adiciona a option aqui
	    		console.log(listaVeiculos);
	  		 },
			error: function(erro){
				console.log(erro);
	  		 }
		});
		
	});

Desde já, agradeço

#2

E você está recebendo a lista de veículos?
Se sim, você precisa:
1 - Remover todos os elementos do select em questão
2 - Iterar sobre a tal lista de veículos e inserir, um a um, no select

#3

Já fiz debug no codigo, e estou recebendo a lista, mas não está enviando para o ajax, a option que eu coloquei no select de veiculos vai para o ajax mesmo. Sobre essa parte de iterar, não entendi muito bem, poderia explicar? Estou meio leigo no assunto ainda

#4

Se você recebe a lista no retorno do ajax, precisa “caminhar” sobre ela e ir populando o select.
Algo assim:

$('#veiculo').find('option').remove();
$(listaVeiculos).each(function(index, element){
    $('#veiculo').append('<option value="'+element.id+'">' + element.modelo + '</option>');
});
#5

Aah sim, isso ai eu tinha feito, só deixei o console.log ali pra ver se ta listando os veiculos, e por algum motivo, não está… Vou tentar mudar o metodo do controller pra ver se dá em algo

#6

Andei dando uma olhada aqui, ele pega o codigo do cliente como mostrado na imagem, com esse codigo ele consegue a lista (tanto que eu consigo listar os itens no console do eclipse), mas não consigo mandar a lista para o ajax… Tem ideia do que pode ser?

image
image.png1209×429 25.9 KB

#7

Caso alguem queira ver os codigos alterados tá aqui

Metodo no controller:

@RequestMapping(path= "/getVagas/{codigo}", method = RequestMethod.GET)
	@ResponseBody
	public List<Veiculo> findveiculo(@PathVariable(value = "codigo") Long codigo, Model model, HttpServletResponse response) {
		List<Veiculo> lista =  veiculoDao.filtraPorCliente(codigo);
		/*
		Gson gson = new Gson();
		String listaToString = gson.toJson(lista);
		*/
		model.addAttribute("lista", lista);
		System.out.println(lista.toString());
		return lista;
	}

JSP:

<div class="form-group">
                    <label class="col-sm-2 control-label">Cliente: </label>
                    <div class="col-sm-10">
                        <select class="form-control" name="cliente" size="1" id="cliente">
							<c:forEach var="c" items="${clientes}">
								<option value="${c.codigo}">${c.nome}</option>
							</c:forEach>                            
							</select>
                    </div>
                </div>

                <br>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Placa: </label>
                    <div class="col-sm-10">
                        <select class="form-control" name="veiculo" size="1" id="veiculo">
                        </select>
                    </div>
                </div>

AJAX:

$('#cliente').change(function(e) {
		var cliente = $('#cliente').find('option:selected').val();
		$.ajax({
		'url' : "http://localhost:8080/SistemaEstacionamento/vaga/getVagas/" + cliente,
		'type' : "GET",
		'success' : function(lista) { 
			var option = '<option>Selecione a Placa do veiculo</option>';
			$.each(lista, function(i, obj) {
				option += '<option>' + obj.placa + '</option>';
			})
			$("#veiculo").html(option).show();  
		}
		})
	});