How to display / hide an input field from a select field? [closed]

Question

How to display / hide an input field from a select field? [closed]

Navigation

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

0

I have a select with two options: 0 and 1 , when I select the 0 option, I need to display a field and when I select 1 , the field must be hidden.

How can I get this result?

javascript html

asked by anonymous 01.11.2018 / 14:32

2 answers

Create Score text without overwriting the file When the property is not int such as forcing the entity to create a field in the table as nullable: false

score 1 · Answer 1

I made using Jquery. If you can not use Jquery, implement the .show() and .hide() method by toggling the display property between none and '' values.

$('select').on('change', function() {
  if (this.value == 1)
    $('#campo-data').show();
  else
    $('#campo-data').hide();  
});

#campo-data {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select><optionvalue="0">Esconde campo data</option>
    <option value="1">Mostra campo data</option>
</select>

<input id="campo-data" type="date" />

score 0 · Answer 2

Considering that:

Value 0 = Show input

Value 1 = Hide input

I've made the following example using VanillaJS : / p>

function hideShowInput(val) {
    let input = document.getElementById('date');  
    
    if(val == 0) input.style.display = "block";    
    else input.style.display = "none";
}

#date {
  display: none;
}

<select onchange="hideShowInput(this.value)">
    <option selected>Selecione uma opção * </option>
    <option value="0">0 - Exibir</option>
    <option value="1">1 - Ocultar</option>
</select> <br><br>


<input id="date" type="date" />