How to display/hide a field(input date) from a select field?

Asked

Viewed 165 times

0

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

How can I get this result?

javascript html

2 answers

1

I did it using Jquery. If you cannot use Jquery, implement the method .show() and .hide() by switching the display property between values none and ''.

$('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>
    <option value="0">Esconde campo data</option>
    <option value="1">Mostra campo data</option>
</select>

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

0

Taking into account that:

Value 0 = Show input

Value 1 = Hide input

I did the following example using Vanillajs:

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" />

Browser other questions tagged javascript html

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