在选择特定下拉列表时显示电子邮件 ID 字段不起作用

Question

在标签责任选择框下，如果我选择其他人，那么我必须获得一个电子邮件 ID 输入框，否则它应该被隐藏。但是 div 下的电子邮件 id 字段，即 showMe，在选择个人以及其他人而不是主管时显示。我希望它只显示给其他人。我尝试了很多组合，但我不知道为什么这可能不起作用。任何线索为什么这不起作用？

我的 HTML 代码是：

<!-- Main content -->
<!-- Content Wrapper. Contains page content -->

<!-- Content Header (Page header) -->
<style>
tr > td
{
  padding-bottom: 1em;
}
#showMe{
    display:none;
}
</style>
<section class="content-header">
<h1>
Add a new checklist

</h1>
<ol class="breadcrumb">
<li><a href="<?php base_url(); ?>"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#">My Requests</a></li>
<li><a href="<?php echo base_url(); ?>exits/resignation_request">Resignation Requests</a></li>
<li class="active">Add Resignation Request</li>
</ol>
</section>
<div class="container-fluid">
<div class="row">
<!-- Thought Day-->
<div class="panel wrapper clearfix m-b-none">

<div class="panel-body">

<input type="hidden" id="page_name" value="requests">

<?php if($error_message!=''){?>
<div class="success-message <?php echo $msg_class;?>"><?php echo $error_message;?>  </div>
<?php }  else { ?>
<?php  $row = $rows[0] ;
if(isset($row['grievance_type'])) {
$grievancetype = $row['grievance_type'];
} else {	$grievancetype = ''; }

?>

<!-- form start -->
<?php echo form_open('exits/my_resignation_request/'.$id,array('name'=>'addostcstevent','id'=>'addostcstevent','method'=>'post','autocomplete'=>'on','class'=>'form-horizontal'))?>
<?php echo form_hidden(array('id'=>$row->id,'action'=>$action));?>
<div class="box-body">

<input type="hidden" name="todays_date" readonly id="todays_date" value="<?php echo date('m/d/y');?>" class="form-control col-md-10" <?php if($USER->permissions[0] != 'all') { ?> readonly <?php } ?>>




<table>
<tr>
<td>
Action Item
</td>
<td>

<input placeholder="Action Item" class=" m-wrap col-md-8 form-control " id="action" type="text" name="action" value="" required/>


</td>

</tr>
<tr>
<td>
Category
</td>
<td>

<select class="default" id="category" name="category">
        <option name="exit_type" value="" selected>Select a option</option>
		<option name="exit_type" value="Managers">Managers</option>
        <option name="exit_type" value="Admins">Admins</option>
        <option name="exit_type" value="Employees">Employees</option>
</select>




</td>
</tr>


<tr></tr>
<tr>
<td>
<label>Responsibility</label>
</td>
<td>
<select class="default" id="security_question" name="exit_type">
        <option name="exit_type" value="" selected>Select a option</option>
		
		<option name="exit_type" value="Individual">Individual</option>
        <option name="exit_type" value="Supervisors">Supervisors</option>
		<option name="exit_type" value="others">others</option>
    
</select>
</td>
</tr>

<tr>
<td>
<label>Timelines for completion</label>
</td>
<td>
<div class="date" data-date="12-02-2012" data-date-format="mm-dd-yyyy" data-date-viewmode="years">
<input placeholder="Last working day" class=" m-wrap col-md-8 form-control " id="startdt" type="text" name="requested_date" value="<?php if($row->requested_date!='') echo date("d-m-Y",$row->requested_date); ?>" required/>
</td>
</tr>



</table>
<div id="showMe">
<table>

<tr>
<td>
Email ID
</td>
<td>
<input placeholder="Email" class=" m-wrap col-md-8 form-control " id="email" type="text" name="email" value="" required/>
  </td>
  </tr>
  
 </table> 
</div>	


</div><!-- /.box-body -->
<div class="box-footer">
<?php

echo form_hidden('action',$action);
echo form_hidden('id',$id);
?>
<!--<button type="submit" class="btn btn-info pull-right" name="withdraw" style="margin:0px 10px" value="withdrawn">Withdraw Resignation</button>-->
<button type="submit" class="btn btn-info pull-right" style="margin:0px 10px">Submit</button>
</div><!-- /.box-footer -->
</form>
<?php } ?>
</div><!-- /.box -->
</div><!--/.col (right) -->
</div>   <!-- /.row -->
<div class="modal fade" role="dialog" id="myLTAModal">

<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Alert!</h4>
</div>
<div class="modal-body">
<!-- modal content-->
<div class="panel-body">
<p>Ensure you refer to LTA guidelines before planning your trip. You will be required to submit your tickets as proof to avail LTA.</p>
</div>
</div>
<!-- modal content-->
</div>
</div>
</div>
<div class="modal fade" role="dialog" id="leaveAllowedModal">

<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Alert!</h4>
</div>
<div class="modal-body">
<!-- modal content-->
<div class="panel-body">
<p class="allowed_text"></p>
</div>
</div>
<!-- modal content-->
</div>
</div>
</div>
</section><!-- /.content -->



<script>
/*$(document).ready(function(){
$('#reservation').daterangepicker();
})*/
</script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>


<script>
var elem = document.getElementById("security_question");

elem.onchange = function(){
    var hiddenDiv = document.getElementById("showMe");
    hiddenDiv.style.display = (this.value == "Individual") ? "none":"none";
	   hiddenDiv.style.display = (this.value == "Supervisors") ? "none":"block";
	      hiddenDiv.style.hidden = (this.value == "others") ? "none":"none";

};

function parseDate(str) {
var mdy = str.split('/')
return new Date(mdy[2], mdy[0]-1, mdy[1]);
}

function daydiff(first, second) {
return Math.round((second-first)/(1000*60*60*24));
}
$(document).ready(function(){
$("#startdt").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
yearRange: "-90:+0",
startDate: new Date(),
autoclose: true
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#enddt').datepicker('setStartDate', minDate);
});
$("#enddt").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
yearRange: "-90:+0"
});
$("#enddt").change(function(){
if($("#startdt").val()!='' && $("#enddt").val()!='')
{
var startdt = $("#startdt").val();
var enddt = $("#enddt").val();
$("#daysleave").val(daydiff(parseDate(startdt), parseDate(enddt)));
if($("#grievance_type").val()!='0')
{

var day_diff_today = daydiff(parseDate($("#today_dt").val()), parseDate($("#startdt").val()));

if(((parseInt($("#daysleave").val()) > parseInt($("#grievance_type option:selected").attr("data-min"))) &&  (parseInt($("#daysleave").val()) < parseInt($("#grievance_type option:selected").attr("data-max"))))&&(day_diff_today > parseInt($("#grievance_type option:selected").attr("data-approvaldays"))))
{ } else {
$("#leaveAllowedModal").modal("show");
}

}
}
})
$("#grievance_type").change(function(){
if($("#startdt").val()!='' && $("#enddt").val()!='' && $("#grievance_type").val()!='0')
{
var day_diff_today = daydiff(parseDate($("#today_dt").val()), parseDate($("#startdt").val()));

if(((parseInt($("#daysleave").val()) > parseInt($("#grievance_type option:selected").attr("data-min"))) &&  (parseInt($("#daysleave").val()) < parseInt($("#grievance_type option:selected").attr("data-max"))))&&(day_diff_today > parseInt($("#grievance_type option:selected").attr("data-approvaldays"))))
{ } else {
$("#leaveAllowedModal").modal("show");
}
}
})
$(".date-picker").datepicker();
$("#optionsRadios1").click(function(){
$("#myLTAModal").modal("show");
})
$('#leaveAllowedModal').on('shown.bs.modal', function() {
var msg = '';
if((parseInt($("#daysleave").val()) > parseInt($("#grievance_type option:selected").attr("data-min"))) &&  (parseInt($("#daysleave").val()) < parseInt($("#grievance_type option:selected").attr("data-max"))))
{ } else {
msg = msg + "You wish you apply "+$("#daysleave").val()+" day of "+$("#grievance_type option:selected").text()+". Minimum and Maximum no. of Leaves allowed to take at a time are "+$("#grievance_type option:selected").attr("data-min")+" and "+$("#grievance_type option:selected").attr("data-max")+" respectively.";
}
var day_diff_today = daydiff(parseDate($("#today_dt").val()), parseDate($("#startdt").val()));
if((day_diff_today < parseInt($("#grievance_type option:selected").attr("data-approvaldays"))))
{
msg = msg + " No. of days of prior approval needed is  " + $("#grievance_type option:selected").attr("data-approvaldays") + " days";
}
$(".allowed_text").html(msg);

})
});


</script>

Answer 1

您不必为每个数据元素编写代码。只需使用下面的。

Javascript： hiddenDiv.className = ((this.value == "others") ? "showDiv":"hideDiv");

CSS：

.showDiv{
    display:block;
}
.hideDiv{
    display:none;
}

html : <div id="showMe" class="hideDiv">