Javascript 隐藏-取消隐藏 HTML 文本框

debugcn 发表于 Dev

MCIT趋势

我想在使用 JavaScript 选择另一个选择值时隐藏和取消隐藏 html 文本框。

$(document).on('change', '#pf_status', function() {
  var val = $(this).val();
  console.log(val);
  if (val == 2) {
    $('#ref-col').hide();
  } else {
    $('#ref-col').show();
  }
});

$(document).ready(function() {
  $('#ref-col').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
  <div class="form-group">
    <label>
            Pass Fail Status <span class="text-danger">*</span>
        </label>
    <select class="form-control" name="pf_status">
      <option value="1">Pass</option>
      <option value="2">Fail</option>
    </select>
  </div>
</div>

<div class="col-md-3" id="ref_col">
  <div class="form-group">
    <label>Pass Date</label>
    <font style="font-size: 14px; color: #AA0000"></font>
    <input type="text" name="pass_date" id="pass_date" class="form-control" value="somedate">
  </div>
</div>

我没有得到想要的输出。我想出了什么问题。谁能帮我？

泽尚·阿迪尔

这是您的选择器的问题，您使用#符号选择带有名称的下拉列表：

#ref-col你的 JS 中的选择器也有问题，应该是这样的#ref_col

id="pf_status"像这样在你的 HTML 中更改你的名字，这将起作用：

$(document).on('change', '#pf_status', function() {

  var val = $(this).val();
  
  $('#ref_col').toggle(val!=2)

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
  <div class="form-group">
    <label>
      Pass Fail Status
      <span class="text-danger">*</span>
    </label>
    <select class="form-control" id="pf_status">
      <option value="1">Pass</option>
      <option value="2">Fail</option>
    </select>
  </div>
</div>

<div class="col-md-3" id="ref_col">
  <div class="form-group">
    <label>Pass Date</label>
    <font style="font-size: 14px; color: #AA0000"></font>
    <input type="text" name="pass_date" id="pass_date" class="form-control" value="somedate">
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。