Question

在使用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>

我没有得到想要的输出。我认为出了点问题。有人可以帮我吗？

Answer 1

将选择器与ID拼写相同
脚本中未使用名称ID
如果不是动态的，则无需委派
下拉菜单没有“请选择”，因此会触发页面加载更改

$(function() {
  $('#pf_status').on('change',function() {
    var val = $(this).val();
    $('#ref_col').toggle(val != 2);
  }).trigger("change"); // trigger to handle the lack of "Please select"
});

<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>

Answer 2

您正在JQuery中使用ID选择器，并在表单中将其声明为name属性

<select class="form-control" name="pf_status">

将其更改为<select class="form-control" id="pf_status">

或

在JQuery选择器中使用名称选择器$(document).on('change', 'select[name="pf_status"]'。

$(document).on('change', '#pf_status', function() {
  var val = $(this).val();
  console.log(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>

Answer 3

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

并且您的JS中的选择器#ref-col也存在问题，它应该像这样#ref_col

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

$(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>

Answer 4

您应该始终尝试弄清楚为什么该代码无法正常工作。始终检查您的浏览器控制台，在那您会得到行号错误。这样，您将学习掌握时间编码。不用担心您的问题的负面评价。我们是开发人员，致力于推动我们的创造，开发和设计，以改善世界。

JQUERY:

$(document).on('change','#pf_status',function(){
    // Here you are using this object to refer to something that is not available in DOM.
});

在您的HTML中，将id属性用作select元素。好了，上面已经显示了。我将向您展示如何在JavaScript中为代码设置setAttribute，而不更改HTML中的任何代码。这样您就可以学习。

在Java语言中：

let ps = document.getElementsByName('pf_status');
ps[0].setAttribute("id","pf_status"); // if you have only 1 select element in your document

您的代码中肯定还有其他问题已由其他开发人员解决。

Javascript隐藏/隐藏HTML文本框

4 个答案: