Altera o valor de um Input com base no Select em tempo real (HTML + JS). – Blog – Devdata Sistemas

Aqui está um exemplo de uma função JavaScript que altera o valor de um input com base no resultado de um elemento select quando ocorre o evento onchange:

<!DOCTYPE html>
<html>
<head>
  <title>Exemplo</title>
</head>
<body>
  <select id="mySelect" onchange="atualizarInput()">
    <option value="opcao1">Opção 1</option>
    <option value="opcao2">Opção 2</option>
    <option value="opcao3">Opção 3</option>
  </select>

  <input type="text" id="myInput" value="">

  <script>
    function atualizarInput() {
      var selectElement = document.getElementById("mySelect");
      var inputElement = document.getElementById("myInput");

      var selectedOption = selectElement.value;

      if (selectedOption === "opcao1") {
        inputElement.value = "Valor da opção 1";
      } else if (selectedOption === "opcao2") {
        inputElement.value = "Valor da opção 2";
      } else if (selectedOption === "opcao3") {
        inputElement.value = "Valor da opção 3";
      } else {
        inputElement.value = ""; // Valor padrão caso nenhuma opção seja selecionada
      }
    }
  </script>
</body>
</html>

Nesse exemplo, temos um elemento select com três opções. Quando o valor selecionado no select é alterado, a função atualizarInput() é chamada. Essa função obtém o elemento select e o elemento input através do seu ID, e então atribui um valor ao input com base na opção selecionada.

No exemplo, se a “Opção 1” for selecionada, o valor do input será “Valor da opção 1”. Se a “Opção 2” for selecionada, o valor será “Valor da opção 2”. O mesmo acontece para a “Opção 3”. Se nenhuma opção for selecionada, o valor do input será vazio.

Related Posts