Question

在这里，我在更改下拉菜单时隐藏了div标签。但是当我从下拉列表中选择任何值时，消息显示为，

TypeError: document.getElementById(...) is null
document.getElementById("leavetype").style.visibility = "hidden";

这是我的代码：

var leave_type = $(this).attr('data_type');
    $('.status_approve').change(function() {
      if (leave_type == '4') {
        document.getElementByName("leavetype").style.visibility = "visible";
      } else {
        document.getElementById("leavetype").style.visibility = "hidden";
      }
    });

<div class="form-group" id="leavetype">
  <label class="col-lg-4 control-label">Emergency leave status</label>
  <div class="col-lg-8">
    <select name="emergencyleavestatus" id="emergencyleavestatus" class="form-control">
      <option value="0">Unpaid</option>
      <option value="1">Paid</option>
    </select>
  </div>
</div>
<select class="status_approve" data_type="<?php echo $row->leavetype_id;?>">
  <option value="">Select Action</option>
  <option value="1" <?php if($row->hr_approve=="1"){echo 'selected="selected"';} ?>>Approve</option>
  <option value="2" <?php if($row->hr_approve=="2"){echo 'selected="selected"';} ?>>Reject</option>
</select>

更新

Answer 1

2个问题;

在将leave_type用作条件之前，您应该定义document.getElementByName("leavetype")
name="leavetype"

除非有document.getElementByID("leavetype")的表单元素，否则无法正常工作，如果您想按ID选择，请使用;

::

Answer 2

试试这个：你可以在这里使用jQuery隐藏和显示div，见下面的代码

$('.status_approve').change(function(){
      var leave_type = $(this).attr('data_type');
      if(leave_type == '4')
      {
         $("#leavetype").show();
       }
      else
      {
        $("#leavetype").hide();
       }
 });

Answer 3

您需要在选项上使用data-*属性更改两件事：

<select class="status_approve">
  <option value="">Select Action</option>
  <option value="1" data-type="1">Approve</option> <!-- here -->
  <option value="2" data-type="4">Reject</option> <!-- here -->
</select>

现在您可以使用此脚本：

$('.status_approve').change(function() {
  var leave_type = $(':selected', this).data('type');
  $("#leavetype").toggle(leave_type == '4');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" id="leavetype">
  <label class="col-lg-4 control-label">Emergency leave status</label>
  <div class="col-lg-8">
    <select name="emergencyleavestatus" id="emergencyleavestatus" class="form-control">
      <option value="0">Unpaid</option>
      <option value="1">Paid</option>
    </select>
  </div>
</div>
<select class="status_approve">
  <option value="">Select Action</option>
  <option value="1" data-type="1">Approve</option>
  <option value="2" data-type="4">Reject</option>
</select>

Answer 4

在请求其中一个元素之前，您可能不会等待DOM完全加载。

纯JS解决方案：

document.addEventListener('DOMContentLoaded', function(){ 
   // your JS here
}, false);

但是既然你已经在使用jQuery，或者你可以放入$（document）.ready（）并使用@Bhushan Kawadkar解决方案来请求元素：

$(function() {
   // your JS here
});

TypeError：document.getElementById（...）为null - 错误消息

4 个答案: