Home / Questions / 166514
Accepted
APRECode
Asked: 2020-05-22 17:09:25 +0800 CST 2020-05-22 17:09:25 +0800 CST

help Input select Dynamic with ajax and jquery

  • 772

I am new to programming, and I need your support please:

By default if they load the data, but I need the client to have to select this input before saving, it must show "Select", and so the client is forced to select the input(), choose and be able to save.

HTML:

    <div class="form-group"> 
<label for=" codDist'">Distrito</label> 
<select class="form-control " id=" codDist'" placeholder="Enter username"></select> 
</div>

JS:

    function cargaDistrito(depart, provin) {
        var $select = $('#codDist');
        $.ajax({data : {
                coddepartamento : depart,
                codprovincia : provin
                    },
                    url : "DistritPais",
                    type : "GET",
                    dataType : 'JSON',
                    success : function(data) {
                        $select.html('');
                        $.each(data,
                        function(key, val) {
        $select.append('<option value="' + val.codDist + '">'+val.descrip+'</option>');})
                    },
                    error : function() {
                        $select.html('<option id="-1">Cargando...</option>');
                    }
                });
    }
jquery

3 Answers

  1. Best Answer

    Before doing the tour with each you must add an append ("Select") and then your each so that it displays all the data that you bring by ajax!

    Cheers

    • 1

  2. Thanks for your answers and maybe someone needs the code, corrected it would end like this: 

    function cargaDistrito(depart, provin) {
    var $select = $('#codDist');
    $.ajax({data : {
            coddepart : depart,
            codprovin : provin
                },
                url : "DistritPais",
                type : "GET",
                dataType : 'JSON',
                success : function(data) {
                    $select.html('');

    $select.append('SELECT.. 

                        $.each(data, function(key, val) {
    $select.append('<option value="' + val.codDist + '">'+val.descrip+'</option>');})
                },
                error : function() {
                    $select.html('<option id="-1">Cargando...</option>');
                }
            });
}
    • 0

  3. The easiest solution is to use append to add a value to the select before loading the data that comes from the JSON

     $select.append(`<option value="-1">  SELECCIONE UNA OPCION </option>`);

    This article shows how to add options to a select with JQuery How to add links with JQuery (ENG)

    • 0