在下拉列表中選擇值時，隱藏文本字段

Question

我想在下拉列表中選擇值“ shift”時顯示一個文本字段。如果值是“ workoff”，則該文本字段變為隱藏狀態。這是我所做的代碼。它不起作用。如何解決呢？

視圖：

<div class="form-group col-md-4">
      <label class="empshift col-md-12 control-label">Shift Type</label>
      <div class="col-sm-6">
         <?php 
            $designationsOptionsJs = 'id="shiftTypeId" class="form-control shiftType"';
            echo form_dropdown('shiftTypeId', $shifttypes, '',$designationsOptionsJs);
        ?>
      </div>
   </div><!--/form-group--> 
   <div class="form-group col-md-4" id="shift_id" style="display:none;">
       <label class="empshift col-md-12 control-label">Shifts</label>
       <div class="col-sm-6">
          <?php 
             $designationsOptionsJs = 'id="shiftId" class="form-control shiftdepartment"';
             echo form_dropdown('shiftId', $shifts, '',$designationsOptionsJs);
           ?>
        </div>
    </div><!--/form-group-->    

腳本：

<script type="text/javascript">
$(document).ready(function(){

        $("#shiftTypeId").change(function(){
            var shiftTypeId = $(this).val();
            if(shiftTypeId == "Shift"){
                $('#shift_id').show();

            }else if(shiftTypeId == "Workoff"){
                $('#shift_id').hide();

            }else{
                $('#shift_id').hide();

            }
        });
        });

        </script>

Answer 1

您必須對動態創建的元素使用這樣的控件，並且僅在value為'Shift'時才顯示該元素，因此使您的代碼簡單如

$(document).on("change","#shiftTypeId",function(){
    $('#shift_id').hide();
    if($(this).val() == "Shift"){
        $('#shift_id').show();
    }
});