Making an input only appear when an option (select) is chosen

Question

Making an input only appear when an option (select) is chosen

Navigation

#1 by (4 votes)

2

I have a registration form, with a selected, but one of the options of this selected when selected should appear an input. Example:

<select>
    <option>value1</option>
    <option>value2</option>
</select>

<input type="text" style="display:none" />

When option 2 was chosen, the input (display: block)

Does anyone know how to do this? Thank you

javascript html jquery

asked by anonymous 07.11.2015 / 21:12

1 answer

Regular Expression How to set the size of layout buttons in version 2.2

score 4 · Accepted Answer

First, give id to your select so we can work with it in javascript.

Then, you can put your input inside a div and display or hide it according to the selected option.

$(document).ready(function() {
  $('#inputOculto').hide();
  $('#mySelect').change(function() {
    if ($('#mySelect').val() == 'value2') {
      $('#inputOculto').show();
    } else {
      $('#inputOculto').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><selectid="mySelect">
  <option>value1</option>
  <option>value2</option>
</select>
<div id="inputOculto">
  <input type="text" />
</div>