在下拉列表中选择值时，隐藏文本字段

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();
    }
});