2016-08-03 4 views
0

他のラベルを選択した場合、ラベル責任選択ボックスでメールID入力ボックスを取得する必要があります。しかし、divの下のメールIDフィールド(showMe)は、[Individual]と[Supervisors]以外のものを選択する際に表示されます。他の人にしか見せたくないです。私は多くの組み合わせを試しましたが、なぜこれがうまくいかないのか分かりません。なぜこれが動いていないのか?特定のドロップダウンを選択した場合のメールIDフィールドの表示

私の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 { \t $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> 
 
\t \t <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> 
 
\t \t 
 
\t \t <option name="exit_type" value="Individual">Individual</option> 
 
     <option name="exit_type" value="Supervisors">Supervisors</option> 
 
\t \t <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> \t 
 

 

 
</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"; 
 
\t hiddenDiv.style.display = (this.value == "Supervisors") ? "none":"block"; 
 
\t  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>

答えて

0

あなたはすべてのデータ要素のためのコードを書くために使用しないでください。ちょうど以下のものを使用してください。

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

CSS:

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

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

関連する問題