How to fill in form data of the Wordpress theme using jQuery

The problem with running jQuery was happening by executing the code only in the mode of viewing wordpress changes, which was causing some conflict.

The code I created to feed the form was this:

jQuery(document).ready(function(){
var urlBase = "https://fipe-parallelum.rhcloud.com/api/v1/carros/";

//Carrega as marcas
jQuery.getJSON( urlBase + "marcas", function( data ) {
    var htmlOptions = "<option value=\"\">Selecione</option>";
    jQuery.each( data, function( key, val ) {
        htmlOptions += "<option value=\"" + val.codigo + "\">" + val.nome + "</option>";
    });

    jQuery("#avia_4_1").html(htmlOptions);
});

jQuery("#avia_4_1").change(function(){
    jQuery.getJSON( urlBase + "marcas/" + jQuery(this).val() + "/modelos", function( data ) {
        var htmlOptions = "";
        jQuery.each( data.modelos, function( key, val) {
            htmlOptions += "<option value=\"" + val.codigo + "\">" + val.nome + "</option>";
        });

        jQuery("#avia_5_1").html(htmlOptions);
    });
});

jQuery("#avia_5_1").change(function(){
    jQuery.getJSON( urlBase + "marcas/" + jQuery("#avia_4_1").val() + "/modelos/" + jQuery(this).val() + "/anos", function( data ) {
        var htmlOptions = "";
        jQuery.each( data, function(  key, val ) {
            htmlOptions += "<option value=\"" + val.codigo + "\">" + val.nome + "</option>";
        });

        jQuery("#avia_6_1").html(htmlOptions);
    });             
});});

So I managed to solve the problem to integrate this data with an own form of the Enfold theme.

You can assemble the string with all <option> and then append, leaving your code like this:

$(document).ready(function(){
    var selectbox = $("#avia_4_1");

    $.get(
        'https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas',
        function(api_array) {
            var options = '';
            $.each(api_array, function(i, obj) {
                options += '<option value="'+obj.codigo+'">'+obj.nome+'</option>';
            });
            selectbox.append(options);
        },
        "json"
    );
});

I made a fiddle to test: link

$(document).ready(function(){
    var urlBase = "http://fipeapi.appspot.com/api/1/";
    $("#marcas").hide();
    $("#veiculos").hide();
    $("#ano").hide();
    $("#tipo").change(function(){
        $("#marcas").hide();
        $("#veiculos").hide();
        $("#ano").hide();
        $.getJSON(urlBase + $("#tipo").val() + "/marcas" + ".json", function( data ){
            var items = ["<option value=\"\">ESCOLHA UMA MARCA</option>"];
            $.each(data, function (key, val) {
                items += ("<option value='" + val.id + "'>" + val.name + "</option>" );
            });
            $("#marcas").show();
            $("#marcas").html(items);
        });
    });
    $("#marcas").change(function(){
        $("#veiculos").hide();
        $("#ano").hide();
        $.getJSON(urlBase + $("#tipo").val() + "/veiculos/" + $(this).val() + ".json", function( data ){
            var items = ["<option value=\"\">ESCOLHA UM VEICULO</option>"];
            $.each(data, function (key, val) {
                items += ("<option value='" + val.id + "'>" + val.name + "</option>" );
            });
            $("#veiculos").show();
            $("#veiculos").html(items);
        });
    });
    $("#veiculos").change(function(){
        $("#ano").hide();
        $.getJSON(urlBase  + $("#tipo").val() + "/veiculo/" + $("#marcas").val() + "/" + $(this).val() + ".json", function( data){
            var items = ["<option value=\"\">ESCOLHA O ANO</option>"];
            $.each(data, function (key, val) {
                items += ("<option value='" + val.id + "'>" + val.name + "</option>" );
            });
            $("#ano").show();
            $("#ano").html(items);
        });
    });
    $(this).change(function(){
        $("#selecao").html("Marca: " + $("#marcas option:selected").text() + " Veiculo: " + $("#veiculos option:selected").text() + " Ano: " + $("#ano option:selected").text())
    });           
});

I made this code based on your previous code, but since I noticed the link is out of the air I used this link But unlike your code, I have already entered the choice of cars, motorcycles and trucks so not having to create one for each type.

I hope you can help, because your code helped me a lot to reach that conclusion.

I'm also inserting .hide and .show as you select the select field, I'm still starting with jQuery, I do not have many skills, but stay there if you need to.