load ajax combo when opening page

0

I have the following code 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 just that I need to do a select that brings the options of the bank and if there is not the desired option the person can add, and when this happens I only update the select.     

asked by anonymous 20.07.2016 / 01:19

1 answer

1

It would be something like this, could open a modal or another form for the user informs the new value and save reloading 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 ones that are missing

    
20.07.2016 / 02:09