Hide the text field,when selecting a value in dropdown

Question

I want to make a text field shown when selecting the value "shift" in the drop down.If the value is "workoff",the text field become hidden.Here is the code that I did.It is not working.How to solve it ?

View:

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

<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

you must use like this for dynamic created elements, also you are displaying the element only when value is 'Shift' so make your code simple like

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