Question

我遇到了在部门下拉字段中触发更改的问题，不确定我是否正确编写了它。错误是Uncaught TypeError：无法读取属性＆＃39; style＆＃39;为null。我试图选择一个类似索赔的部门，然后它将启动一个onchange以显示另一个名为workrequested的下拉列表。我还没有填补所有部门，但如果我想先在几个部门进行测试，那就不应该了。我认为这与dvPassport1.style.display

有关

   <script>
  function ShowHideDiv1() {
        var Department = document.getElementById("Department");
        var divPassport1 = document.getElementById("divPassport1");
        divPassport1.style.display = Department.value == "Claims" || Department.value == "Flat 1"|| Department.value == "Flat 2"|| Department.value == "Hanging Bulk" || Department.value == "Hanging Store North" || Department.value == "Hanging Store South" || Department.value == "Inventory Integrity" || Department.value == "Rack Shoes" || Department.value == "Fine Jewelry"? "block" : "none";
    }
     function ShowHideDiv2() {
        var Department = document.getElementById("Department");
        var divPassport2 = document.getElementById("divPassport2");
        divPassport2.style.display = Department.value == "JackPotLane" ? "block" : "none";
    }

    </script>
<?=form_open('insert/create/', array(
'class' => 'form-horizontal',
'role' => 'form',

)); ?>
<div class="row">
<div class="container">
<h3>Validation Form</h3>

<br>
  <div class="col-sm-6">


   <div class="form-group">
     <?php echo form_label('ZID', 'ZID', $attributes=array());?>
     <?php echo form_input('ZID', set_value('ZID'), $attributes=array("class" => "form-control", "id"=>"ZID"));?>
     <!--show error message -->
      <div class="error"><?php echo form_error('ZID'); ?></div>
   </div>



    <div class="form-group">
     <?php echo form_label('Employee Name', 'EmpName', $attributes=array());?>
     <?php echo form_input('EmpName', set_value('EmpName'), $attributes=array("class" => "form-control", "id"=>"EmpName"));?>
      <!--show error message -->
   <div class="error"><?php echo form_error('EmpName'); ?></div>
   </div>





    <div class="form-group">
     <?php echo form_label('Department', 'Department', $attributes=array());?>
     <?php 
     $options = array(
        ""=>"Choose Department",
        "Claims" => "Claims",
        "Flat 1"=>"Flat 1");
     ?>
     <?php echo form_dropdown('Department', $options,set_value('Department'),array("class" => "form-control", "id"=>"Department", "onchange" => "ShowHideDiv1();ShowHideDiv2();"));?>

     <!--show error message -->
   <div  class="error"><?php echo form_error('Department'); ?></div>
   </div>




    <div class="form-group" id="divpassport1" style="display: none" >
     <?php echo form_label('WorkRequested', 'WorkRequested', $attributes=array());?>
     <?php 
     $options = array(
        ""=>"Choose WorkRequested",
        "Cases Not Received" => "Cases Not Received",
        "Master Pack"=>"Master Pack");
     ?>
     <?php echo form_dropdown('WorkRequested', $options,set_value('WorkRequested'),array("class" => "form-control", "id"=>"WorkRequested"));?>
         <!--show error message -->
   <div  class="error"><?php echo form_error('WorkRequested'); ?></div>
   </div>

   <div class="form-group" id="divpassport2" style="display: none" ">
     <?php echo form_label('WorkRequested', 'WorkRequested', $attributes=array());?>
     <?php 
     $options = array(
        ""=>"Choose jackpot WorkRequested",
        "FYI" => "FYI",
        "Request"=>"Request");
     ?>
     <?php echo form_dropdown('WorkRequested', $options,set_value('WorkRequested'),array("class" => "form-control", "id"=>"WorkRequested"));?>
         <!--show error message -->
   <div  class="error"><?php echo form_error('WorkRequested'); ?></div>
   </div>




<div class="form-group">
  <?php echo form_label('Description','ReqDescription', $attributes=array());?>
<?php echo form_textarea('ReqDescription',set_value('ReqDescription'),array("class"=>"form-control textarea","id"=>"ReqDescription"));?>
     <!--show error ReqDescription -->
<div class="error"><?php echo form_error('ReqDescription'); ?></div>
</div>
 <input type="hidden" name="DATEREQUESTED" value="<?php echo date("Y/m/d h:i:sa");?>" value="<?=set_value('DATEREQUESTED')?> "  value="<?=set_value('DATEREQUESTED')?>"> 


 <input type="hidden" class="form-control" id="Status" name="Status" value="Received" placeholder="Status" value="<?=set_value('Status')?>">
<div class="form-group">
<?php echo form_submit('submit', 'Submit', array("class"=>"btn-primary btn", "id"=>"submit"));?>
</div>


  <?php echo form_close()?>

Answer 1

据我所知，您希望得到divPassport1（d i vPassport1）和divPassport2而不是dvPassport1和dvPassport2。

分别将var dvPassport1 = document.getElementById("dvPassport1");更改为var dvPassport1 = document.getElementById("divPassport1");和第二个，或更正ID。

修改我猜你太早访问元素了，你还没有加载DOM。在关闭body之前将js代码移动到页面末尾并按照以下方式包装以等待window onload事件：

<script> (function() { // your javascript code here // the DOM will be available here })(); </script>

在onchange上隐藏和显示div有问题

1 个答案: