Javascript, action on selected option

Asked

Viewed 51 times

1

I am doing an HTML work and I want to select the option "Não está nas opções", a text box appears.

HTML:

<head>
    <title>Ajuda</title>
</head>
<body>
    <center>
        <form action="imagem 10.png">
            Primeiro Nome
            <br>
            <input type="text" placeholder="Zé">
            <p></p>
            Último nome
            <br>
            <input type="text" placeholder="Oliveira">
            <p></p>
            País
            <br>
            <select name="lista">
                <option>Portugal</option>
                <option>Espanha</option>
                <option>Brasil</option>
                <option>França</option>
                <option>Reino Unido</option>
                <option>Irlanda</option>
                <option>Países Baixos</option>
                <option>Alemanha</option>
                <option>Polónia</option>
                <option>Itália</option>
                <option>Brasil</option>
                <option>Não está nas opções</option>
            </select>
        </form>
    </center>
</body>
javascript html

1 answer

3

Using pure Javascript, you can do so:

    var lista = document.getElementById("lista");
    lista.onchange = function (){
      if(lista.selectedIndex == lista.options.length - 1){ // caso a opcao selecionada seja a ultima, mostre a caixa de texto
        document.getElementById("outra-opcao").style.display = "block";
      }else{ // caso contrario, esconda a caixa de texto
        document.getElementById("outra-opcao").style.display = "none";
      }
    };

Complete code:

var lista = document.getElementById("lista");
lista.onchange = function() {
  if (lista.selectedIndex == lista.options.length - 1) { // caso a opcao selecionada seja a ultima, mostre a caixa de texto
    document.getElementById("outra-opcao").style.display = "block";
  } else { // caso contrario, esconda a caixa de texto
    document.getElementById("outra-opcao").style.display = "none";
  }
};
<html>

<head>
  <title>Ajuda</title>
</head>

<body>
  <form action="imagem 10.png">
    Primeiro Nome
    <br>
    <input type="text" placeholder="Zé">
    <p></p>
    Último nome
    <br>
    <input type="text" placeholder="Oliveira">
    <p></p>
    País
    <br>
    <select name="lista" id="lista">
      <option>Portugal</option>
      <option>Espanha</option>
      <option>Brasil</option>
      <option>França</option>
      <option>Reino Unido</option>
      <option>Irlanda</option>
      <option>Países Baixos</option>
      <option>Alemanha</option>
      <option>Polónia</option>
      <option>Itália</option>
      <option>Brasil</option>
      <option>Não está nas opções</option>
    </select>
    <input id="outra-opcao" type="text" style="display: none;">
  </form>
</body>

</html>

Browser other questions tagged javascript html

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