How to update a select in html with javascript

Asked

Viewed 1,149 times

0

I’m new to development and I need help. I have a select in html that I need updated when selected from another select.

Follows html code:

$(document).ready(function () {
    $('select[name=camporegiao]').on('change', function () {
        $.ajax({
            type: 'GET',
            url: '../../FiltroFilial',
            data: 'idregiao=' + $('select[name=camporegiao]').val(),

            statusCode: {
                404: function () {
                    alert('Pagina não encontrada');
                },
                500: function () {
                    alert('erro no servidor')
                }
            },
            success: function (dados) {
                          $('select[name=campofilial]').refresh????;
                }
            }
        });
    })
});
<div class="col-md-3">
  <p>
   <b id="reg" name="reg">Região</b>
   </p>
   <select id="camporegiao" name="camporegiao" class="form-control show-tick" data-live-search="true">
   <% for(Regiao regiao: fdao.listarRegiao()){ %>
   <option value=<%=regiao.getId()%>><%=regiao.getRegiao()%></option>
   <% } %>
   </select>
   </div>
   </div>
   <div class="row clearfix">
   <div class="col-md-3">
   <p>
    <b>Filial</b>
   </p>
   <select id="campofilial" name="campofilial" class="form-control show-tick" data-live-search="true">
   <% for(Filial filial: fdao.listarFilial()){ %>
   <option value=<%=filial.getId()%>><%=filial.getFilial()%></option>
   <% } %>
   </select>
  </div>

I don’t know how to do in javascript Thank you in advance

javascript html ajax
  • 1

    Maybe $('select[name=campofilial]').html(dados)?

  • 1

    To be accurate in the solution we would need to see how is the return of your ajax, ie what content returned in data. But as stated above the path would be using . html() or similiar.

  • Hello It didn’t work I got this to refresh the full page window.location.Reload() But I would like to refresh the select $('select[name=campofilial]').location.Reload();

2 answers

0

For this you will need to use Jquery.

success: function (dados) {
  $('select[name=campofilial]').empty();
  $('select[name=campofilial]').html(dados);
}

In the code line above, you must enter the new inputs that were searched by ajax. At first thing ($('select[name=campofilial]').empty();) you clear the select of the existing information and in the second row you enter the new data.

NOTE: On the page FiltroFilial where it retrieves the data, each data has to come within a <option></option>.

0

Thank you very much for your help

I got it this way

$(document).ready(function () {
    $('#camporegiao').on('change', function () {
        $("#campofilial").empty();
        $.ajax({
            type: 'GET',
            url: '../../FiltroFilial',
            data: 'idregiao=' + $('#camporegiao').val(),
            statusCode: {
                404: function () {
                    alert('Pagina não encontrada');
                },
                500: function () {
                    alert('erro no servidor')
                }
            },
            success: function (dados) {
                filiaisfiltradas = dados.split(";");
                for (var i = 0; i < filiaisfiltradas.length; i++) {
                    var codfilial = filiaisfiltradas[i].split("-")[0];
                    var nomefilial = filiaisfiltradas[i].split("-")[1];
                    console.log(nomefilial);
                    $('#campofilial').append('<option value ="' + codfilial + '">' + nomefilial + '</option>');
                }
            }
        });
    });
});

But a problem happens When open the data appears the previous listing but when I click appears the data I need. Example:

Listing To B C D

I listed new just C D

But the complete listing keeps coming up And when I click A appears C

I don’t know how to fix

Browser other questions tagged javascript html ajax

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