load ajax combo when opening page

Asked

Viewed 603 times

0

I have the code below to load the cities:

$(function(){
        $('#cod_estados').change(function(){
            if( $(this).val() ) {
                $('#cod_cidades').hide();
                $('.carregando').show();
                $.getJSON('cidades.ajax.php?search=',{cod_estados: $(this).val(), ajax: 'true'}, function(j){
                    var options = '<option value=""></option>'; 
                    for (var i = 0; i < j.length; i++) {
                        options += '<option value="' + j[i].cod_cidades + '">' + j[i].nome + '</option>';
                    }   
                    $('#cod_cidades').html(options).show();
                    $('.carregando').hide();
                });
            } else {
                $('#cod_cidades').html('<option value="">– Escolha um estado –</option>');
            }
        });
    });

and the form:

<label for="cod_cidades">Cidade:</label>
    <span class="carregando">Aguarde, carregando...</span>
    <select name="cod_cidades" id="cod_cidades">
        <option value="">-- Escolha um estado --</option>
    </select>

it works perfectly only that I need to make a select that brings the options of the bank and if there is not the option desired by the person it can add, and when this happens I update only the select.

javascript jquery ajax

  • would be like having a button next to select for the user to add a new option to select and would be saved in the database?

  • @fernandoandrade exactly this only that this code ai loads in the change event or it depends on the change of another combo and what I have to do it has to open normal and only stun if the user add something else in the bank.

  • You can assemble this logo combo with php and make a function that reloads it in case the user adds new options, already leaving selected the new option.

1 answer

1


It would be something like this, could open a modal or another form for the user informs the new value and when saving reload the select.

$('#btn_adicionar').click(function(event) {
    event.preventDefault();
    $.ajax({
        url: 'salvar_cidade.ajax.php',
        type: 'POST',
        dataType: 'json',
        data: {cod_estados: estado, cod_cidades: novo_cod_cidade},
    })
    .done(function(j) {
        if (j.status) {
            recarregarCombo($('#cod_cidades'), estado, j.cod_cidades);
        } else {
            alert('Erro ao salvar nova cidade');
        }
    })
    .fail(function() {
        console.log("error");
    });

});

/**
 * recarrega as opções do select passado
 * @param  id_select seletor do combo que será recarregado
 * @param  {[type]} cod_estados    cod_estado para fazer a busca
 * @param  {[type]} valor_selected valor que será marcado no select
 * 
 */
function recarregarCombo($select, cod_estados, valor_selected) {
    $.getJSON('cidades.ajax.php?search=',{cod_estados: cod_estados, ajax: 'true'}, function(j){
        var options = '<option value=""></option>';
        for (var i = 0; i < j.length; i++) {
            var selected = j[i].cod_cidades == novo_valor ? 'selected' : '';
            options += '<option value="' + j[i].cod_cidades + '" '+ selected +' >' + j[i].nome + '</option>';
        }
        $select.html(options).show();
        $('.carregando').hide();
    });
}

Not only are these values enough to save your new value, but then you add the missing ones

  • I hope it gives you an idea of how to do

Browser other questions tagged javascript jquery ajax

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