0

Como repetir os valores selecionados em um select em um input[type="text"] tendo em vista o meu HTML abaixo usando JavaScript?

<select name="destino_in" class="form-control" required>
  <option value="Vilamar">Vilamar</option>
  <option value="Savoy">Savoy</option>
</select>

<!-- dados a serem repetidos aqui -->
<input type="text" name"destino_out">

2 Respostas 2

2

Você pode fazer assim (sem jQuery):

(function () {
  var sel = document.getElementById('destino_in');
  var inp = document.getElementById('destino_out');

  sel.addEventListener('change', function () {
    inp.value = this.value;
  });
}());
<select name="destino_in" id="destino_in" class="form-control">
  <option value="" selected disabled>Selecione...</option>
  <option value="Vilamar">Vilamar</option>
  <option value="Savoy">Savoy</option>
</select>

<input type="text" name"destino_out" id="destino_out" "form-control" />

Se você quiser usar jQuery, basta trocar o JavaScript acima por:

(function ($) {
  $('#destino_in').on('change', function () {
    var $self = $(this);

    $('#destino_out').val($self.val());
  });
}(jQuery));

No entanto, prefira sempre não usar o jQuery, tendo em vista que você não precisará de carregar a biblioteca para fazer efeitos triviais, como este.

1

Utilizando jQuery você pode atribuir um método ao evento change no select para que quando o usuário altere a opção selecionada o método atualize o value do input text logo abaixo.

<form action="#">
  <select id="lista" name="destino_in" on-change="atualizar()">
    <option value='Vilamar'>Vilamar</option>
    <option value='Savoy'>Savoy</option>
  </select>
  <input type="text" id="selecionada" name="destino_out">
</form>
<script>
  $(function () {
    function update() {
      $("#selecionada").val($("#lista").val());
    }
    update();
    $( "#lista" ).change(update);
  });
</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .