表单 - 通过在选择标签中选择一个选项来显示隐藏字段 [关闭]答案

【问题标题】：Forms - Show a hidden field by selecting an option in the select tag [closed]表单 - 通过在选择标签中选择一个选项来显示隐藏字段 [关闭]
【发布时间】：2015-12-08 05:00:03
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery forms hiddenfield

【解决方案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>

注意：

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

添加 jquery 库

【讨论】：

因为我是 JS 的新手，我发现它很容易理解！谢谢！！

【解决方案2】：

您需要检查选择框的选定值。

<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();
      }
});

DEMO

【讨论】：

非常感谢您的宝贵时间！！我将它与其他人的代码混合在一起：D