Pass selected values in a select to a div

Question

Pass selected values in a select to a div

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

I have 02 selects that when you select the city of the first, it automatically fills in the state of the other. See:

<select name='Cidade' id='cidade' class="form-control" required='required'>
     <option>Selecione a cidade</option>
     <option value="RJ">Rio de Janeiro</option>
     <option value="SP">São Paulo</option>
</select>

<script type=\"text/javascript\">
$(function(){
    $('#cidade').change(function(){
        if( $(this).val() ) {
            $('#estado').hide();
            $('.carregando').show();
    $.getJSON('listar-estados.php?search=',{series: $(this).val(), ajax: 'true'}, function(j){
                var options = '';
                for (var i = 0; i < j.length; i++) {
                    options += '<option value=\"' + j[i].id + '\">' + j[i].estado + '</option>';
                }
                $('#estado').html(options).show();
                $('.carregando').hide();
            });
        } else {
            $('#estado').html('<option value="">– Escolha o estado –</option>');
        }
    });
});
</script>

The states come from the Mysql database and are listed in PHP:

<?php
    public function listarEstados($idCidades){

    $sqlEstados = mysqli_query($this->conexao,"SELECT * FROM estados WHERE Cidades = '".$idCidades."';");

       while($peEstados = mysqli_fetch_assoc($sqlEstados)){
              $listarEstados[] = array(
                  'id'  => $peCidades['$idEstados'],
                  'estados' => utf8_encode($peEstados['Estados']),
              );
         }
       return (json_encode($listarEstados));
    }
?>

HTML:

<div class="form-group">
    <span class="carregando">Aguarde, carregando...</span>
    <label for="estado" class="control-label">Estado: <span style="color: red">*</span></label>
         <select name="Estado" id="estado" class="form-control" >
        <option>Selecione a cidade acima</option>
    </select>
</div>

It works perfectly, but how could I get the selected value in the state (second select) and play to the jquery below?

var estadousuario = document.querySelector('#estadousuario');
var paragrafoEstadoUsuario = document.querySelector('#paragrafoestadousuario');
estadousuario.addEventListener('keyup', function () {
paragrafoEstadoUsuario.innerHTML = "<input maxlength='200' type='text' ='' class='form-control' value='" + estadousuario.value + "' disabled />";

jquery

asked by anonymous 16.09.2018 / 23:27

2 answers

1

Good night, my friend,

You can follow the same as already done for the city by adding an event of change() in the selectBox of the State:

    $('#estado').change(function () {
        var estadoSelecionado = $(this).val();
        
        //Faça o que quiser aqui
    }

16.09.2018 / 23:39

Stable vs. unstable ordering ERROR # 1111 - Invalid use of group function (SUM | COUNT)

score 3 · Accepted Answer

You have some errors in the code:

In% w / o you are getting for ("state" in the singular) of the Ajax return, and in PHP it is returning j[i].estado ("states" in the plural). This results in undefined .

Change the line in PHP to:

'estado' => utf8_encode($peEstados['Estados']),

Here: 'estados' => you are selecting a document.querySelector('#estadousuario'); that does not exist. The id of id is select , then the correct would be:

var estadousuario = document.querySelector('#estado');

To get the value of #estado , do not use the select event, but keyup :

estadousuario.addEventListener('change', function () {...

With these fixes it will work:

var estadousuario = document.querySelector('#estado');
var paragrafoEstadoUsuario = document.querySelector('#paragrafoestadousuario');
estadousuario.addEventListener('change', function () {
   paragrafoEstadoUsuario.innerHTML = "<input maxlength='200' type='text' ='' class='form-control' value='" + estadousuario.value + "' disabled />";
});

$(function(){
   $('#cidade').change(function(){
      if( $(this).val() ) {
         $('#estado').hide();
         $('.carregando').show();
         $.getJSON('listar-estados.php?search=',{series: $(this).val(), ajax: 'true'}, function(j){
            var options = '';
            for (var i = 0; i < j.length; i++) {
               options += '<option value=\"' + j[i].id + '\">' + j[i].estado + '</option>';
            }
            $('#estado').html(options).show();
            $('.carregando').hide();
         });
      } else {
         $('#estado').html('<option value="">– Escolha o estado –</option>');
      }
   });
});

You can use the change event in jQuery, it's simpler than code:

Switch:

var estadousuario = document.querySelector('#estado');
var paragrafoEstadoUsuario = document.querySelector('#paragrafoestadousuario');
estadousuario.addEventListener('change', function () {
   paragrafoEstadoUsuario.innerHTML = "<input maxlength='200' type='text' ='' class='form-control' value='" + estadousuario.value + "' disabled />";
});

By:

$('#estado').on("change", function(){
   $('#paragrafoestadousuario').html("<input maxlength='200' type='text' ='' class='form-control' value='" + this.value + "' disabled />");
});