How to update a select in html with javascript

Question

How to update a select in html with javascript

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

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

Follow 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 do not know how to do it in javascript Thanks in advance

javascript html ajax

asked by anonymous 23.10.2017 / 14:32

2 answers

How to perform nested column query of type JSON Inserting data into the bank gives the error "duplicate key value violates uniqueness constraint"

score 0 · Answer 1

For this you will have to use Jquery .

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

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

NOTE: On page FiltroFilial where you are going to fetch the data, each data must come within <option></option> .

score 0 · Answer 2

Thank you very much for the help

I got it as follows

$(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 there is a problem When you open the data the previous listing appears but when I click the data I need appears. Example:

Listing THE B W D

I've listed new only W D

But the full listing continues to appear And when I click on A appears C

I do not know how to solve