Fill a select according to another select with Jquery

Asked

Viewed 405 times

-2

Someone can help me with this logic?

Next I am filling a select Manufacturer with data from a json using Jquery, the problem is that I can not think of a way to fill the other select Model according to which I select in the manufacturer, I am new in this business of Jquery.

Formulario

Meu Json

0   
id  1
nome    "Ford"
modelo  
0   
id  1
nome    "mustang"
1   
id  2
nome    "fiesta"
2   
id  3
nome    "Ka"
1   
id  2
nome    "Fiat"
modelo  
0   
id  4
nome    "Uno"
1   
id  5
nome    "Cronos"
2   
id  6
nome    "Argo"
2   
id  3
nome    "chevrolet"
modelo  
0   
id  7
nome    "Camaro"
1   
id  8
nome    "Cruze"
2   
id  9
nome    "Onix"

Here this code of my form, Obviously the logic q developed below does not work, it just fills the select Manufacturer but n works in the precise model of a north of how to proceed.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    Fabricante:
    <select name="fabricante" id="fabricante">
        <option>Selecione um fabricante</option>
    </select>
    <br />
    <br /> Modelo:
    <select name="modelo" id="modelo">

    </select>

    <script src="<c:url value="js/jquery.js"/>"></script>



    <script>
        $(document)
                .ready(
                        function() {

                            carregar_json('fabricante')

                            function carregar_json(id, id_modelo) {
                                var html = ""

                                $
                                        .getJSON(
                                                "http://localhost:8080/alucar/cadastroVeiculoJ",
                                                function(data) {

                                                    html += "<option>Selecione "
                                                            + id + "</option>";
                                                    console.log(data);
                                                    if (id == "fabricante"
                                                            && id_modelo == null) {
                                                        for (var i = 0; i < data.length; i++) {
                                                            console
                                                                    .log(data[i].nome)
                                                            html += "<option value="+data[i].id+">"
                                                                    + data[i].nome
                                                                    + "</option>";
                                                        }
                                                    } else {
                                                        for (var i = 0; i < data.lenght; i++) {
                                                            if (data[i].id == id_modelo) {
                                                                for (var j = 0; j < data[i].modelo.length; j++) {
                                                                    html += "<option value="+data[i].modelo[j].id+">"
                                                                            + data[i].modelo[j].nome
                                                                            + "</option>"
                                                                }
                                                            }
                                                        }
                                                    }

                                                    $("#" + id).html(html);
                                                })

                            }

                            $(document).on("change", '#fabricante', function() {
                                var id_modelo = $(this).val();
                                if (id_modelo != null) {
                                    carregar_json("modelo", id_modelo);
                                }
                            })

                        })
    </script>



</body>
</html>
javascript java jquery html5 jsp

1 answer

-1


Man, I had several problems also when trying to use this JSP padding, the JVM turns your page into JSP in a Servlet and it seems to mock the whole javascript. The best thing to do is to request your API again by sending the manufacturer field ID, so you can load the models based on the chosen manufacturer. Something like that:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <label for='fabricante'>Fabricante</label>
    <select name='fabricante' id='fabricante'>
        <option>selecione um fabricante</option>
    </select>
    <br><br>
    <label for='modelos'>Modelos</label>
    <select name='modelos' id='modelos'>
        <option>selecione um modelo</option>
    
    </select>
</form>

<script type="text/javascript">
$(document).ready(function(){
  $.getJSON("http://fipeapi.appspot.com/api/1/carros/marcas.json", function(dados) {
    if (!("erro" in dados)) {
      for(linha=0; linha < dados.length; linha++){
          $("#fabricante").append('<option value="'+dados[linha].id+'">'+dados[linha].name+'</option>');
      }
    } //end if.
    else {
      alert("Não foi possível carregar as marcas.");
    }
  });
  $("#fabricante").change(function(){  $.getJSON("http://fipeapi.appspot.com/api/1/carros/veiculos/"+$('#fabricante').val()+".json", function(dados) {
    if (!("erro" in dados)) {
      for(linha=0; linha < dados.length; linha++){
          $("#modelos").append('<option value="'+dados[linha].id+'">'+dados[linha].name+'</option>');
      }
    } //end if.
    else {
      alert("Não foi possível carregar as marcas.");
    }
  });
  });
});
</script>

I hope I’ve helped,

Big hug.

  • Oops, thank you so much for the tip, it worked right, vlw even !!!!!!!

Browser other questions tagged javascript java jquery html5 jsp

You are not signed in. Login or sign up in order to post.