如何在选择列表中进行选择之前和之后隐藏和显示标签及其字段答案

【问题标题】：How to hide and show a label and its field prior to and after a selection from a selection list如何在选择列表中进行选择之前和之后隐藏和显示标签及其字段
【发布时间】：2015-05-12 00:34:56
【问题描述】：

我正在创建一个表单，允许客户输入他的订单详细信息。选择列表中的付款方式有 3 个选项。如果选择的选项是信用卡或借记卡，则用户必须输入卡号。我的问题是我希望隐藏卡号标签及其字段，直到用户做出选择。谁能告诉我怎么做？

【问题讨论】：

您好，欢迎您。请谷歌“js select onchange”和“css display hidden block”。尝试找到一种方法来实现这一点，如果你遇到错误或卡住回来。有很多教程展示了如何做这些事情。
或者这个-> goo.gl/RWS8FV

标签： javascript php html

【解决方案1】：

这应该可以解决问题。

<!DOCTYPE html>
<html>
<head>
<scirpt src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function()
{
    $('input').keypress(function() {
        $('input').css('visibility','visible');
    })
});
</script>

<body>
<form>
    <input type="text" name="credit-card" placeholder='####-####-####-####'>
    <input type="text" style="visibility:hidden;" name="name-on-card">
    <input type="date" style="visibility:hidden;" name="date-on-card">
</form>

</body>
</html>

【讨论】：

【解决方案2】：

这是一个带有基本示例的工作 sippet：

$(document).ready(function(){
  $('select').on('change',function(){
    var val = $(this).val();
    DisplayField(val);
  })
  function DisplayField(val){
    if(val === '1')
      {
        $('#credit').show();
        $('#debit').hide();
      }else if(val === '2'){
        $('#debit').show();
        $('#credit').hide();
      }else{
        $('#credit, #debit').hide();
      }
  }
});

#credit, #debit{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="0">Select Payment Method</option>
  <option value="1">Credit Card</option>
  <option value="2">Debit Card</option>
</select>

<div id="credit">Credit Card Number <input type="text" /></div>
<div id="debit">Debit Card Number <input type="text" /></div>

【讨论】：