Javascript 表单-通过在“选择”标记中选择一个选项来显示隐藏字段

好的，我的表单中有一个选择区域，还有一个隐藏字段，名为“插入产品编号”。我想做的是：如果用户选择“产品”选项，隐藏字段将显示在选择字段的正下方。我该怎么做？谢谢

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

乔布斯
产品
其他

您需要选中选择框的选定值

<select id="ddlSelect">
      <option>Jobs</option>
      <option>Products</option>
      <option>Other</option>
    </select>
<input type="text" id="hdnPro" value="product" style='display:none'/>

$('#ddlSelect').on('change',function(){
   if($(this).val() == 'Products'){
        $('#hdnPro').show();
      }else{
        $('#hdnPro').hide();
      }
});

乔布斯
产品
其他
$（'#ddlSelect'）。在（'change'，function（）上{
if（$（this）.val（）=='Products'）{
$（'#hdnPro'）.show（）；
}否则{
$（'#hdnPro'）.hide（）；
}
});

乔布斯
产品
其他
$（文档）.ready（函数（）{
$（“#类型”）.change（函数（）{
var type=$（this.val（）；
如果（类型=“2”）{
$（“#产品”）.show（）；
}否则{
$（“#产品”）.hide（）；
}
});
});

注意：

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

---

添加jquery库

我发现它很容易理解，因为我是JS的新手！谢谢非常感谢您抽出时间！！我把这个和另一个人的密码混在一起了：D

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