Forms - Show a hidden field by selecting an option in the select tag

Question

Ok so, I have this select area in my form and also a hidden field called "insert product number". What I want to do is: if the user selects the "product" option, the hidden field will show right below the selection field. How can I do that? Thanks!

    <select>
      <option>Jobs</option>
      <option>Products</option>
      <option>Other</option>
    </select>

Answer 1

  <select id="types">
  <option value="1">Jobs</option>
  <option value="2">Products</option>
  <option value="3">Other</option>
</select>

<input type="text" id="products" placeholder="Insert product number" style="display:none"/>


<script type="text/javascript">
$(document).ready(function(){

$("#types").change(function(){

  var type = $(this).val();

   if(type  == "2"){
        $("#products").show();
      }else{
        $("#products").hide();
      }
});

});

</script>

Note:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

add jquery library