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

Question

我想在下拉列表中选择值"shift"时显示一个文本字段。如果值为"workoff"，则文本字段将变为隐藏状态。这是我 did.It 不起作用的代码。怎么解决？

视图：

<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

您必须像这样用于动态创建的元素，并且仅当值为"Shift"时才显示元素，因此使您的代码变得简单，例如

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