One dropdown down depends on two dropdowns in codeigniter with - php

Question

Here I have Two independent dropdowns : "Sub company " and " Role" and there is a third dropdown which depends on these two dropdowns. basically what I want to implement is if the chosen "Role" is NOT 'manager' and 'admin', then displays third dropdown "manager", which its options depends on sub company .
Right now I am able to get all the managers depends on sub company , what I need to do is to make a condition to only show managers list when role !== 'manager' && role !== 'admin'.
Here is the view.php
<div class="form-group col-md-4">
<label for="pwd">Sub Company Name</label>
<div class="alert-danger"><?php echo form_error('Subcom'); ?></div>
<select class="form-control" id="Subcom" name="Subcom" >
<option value="">Select Sub Company</option>
<?php
foreach($company_name as $row )
{
echo '<option value="'.$row->company_name.'" '.set_select('Subcom', $row->company_name).'>'.$row->company_name.'</option>';
}
?>
</select>
</div>
<div class="form-group col-md-4">
<label for="pwd">Role</label>
<div class="alert-danger"> <?php echo form_error('role'); ?></div>
<select class="form-control" id="role" name="role" placeholder="Select Role">
<option value="">Select Role</option></div>
<?php
foreach($role_name as $row )
{
echo '<option value="'.$row->id.'" '.set_select('role', $row->role_name).'>'.$row->role_name.'</option>';
}
?>
</select>
</div>
<div class="form-group col-md-4" >
<label for="pwd">Manager</label>
<div class="alert-danger"> <?php echo form_error('manager'); ?></div>
<select class="form-control" id="manager" name="manager" placeholder="Select Manager" style="display:none" disabled>
<option value="">Select Manager</option>
</select>
</div>
And here is the script
<script type="text/javascript">
$(document).ready(function(){
$(' #Subcom, #role').on('change' , function() {
var company_name = $('#Subcom').val();
var role = $('#role').val();
if( company_name!==''&& role !== '' && role !=='manager' && role !==
'admin')
{
//alert('ok');
$('#manager').prop('disabled', false);
$.ajax({
url:"<?php echo base_url()?>getManager",
type: "POST",
data: { 'company_name' : company_name},
dataType:'json',
success: function(data){
console.log(data);
false;
$('#manager').html(data.manager);
$('#manager').show();
},
error: function(event){
console.log(event);
alert('Error occur...');
}
});
}else {
//alert('sgsg');
$('#manager').prop('disabled', true);
$('#manager').hide();
}
});
});
</script>
Here is the controller
public function getManager()
{
//echo json_encode ($_REQUEST); die;
//print_r($_REQUEST);
//die;
$company_name = $this->input->post('company_name');
$getallmanager = $this->project_model->get_manager_query($company_name);
$getallstaff = $this->project_model->get_all_staff($company_name);
$all_the_mangers = '';
$all_the_staffs = '';
if(count($getallmanager)>0)
{
foreach ($getallmanager as $manager){
//if(role!=='manager')
$all_the_mangers .='<option value="' .$manager->first_name.'">'.$manager->first_name.'</option>';
}
}
if(count($getallstaff)>0)
{
foreach ($getallstaff as $staff){
$all_the_staffs .='<option value="' .$staff->first_name.'">'.$staff->first_name.'</option>';
}
}
$result = array('manager'=>$all_the_mangers,'staffs'=>$all_the_staffs);
echo json_encode($result);die;
}
}
And here is the Model:
public function get_manager_query($company_name)
{
$query = $this->db->get_where('user_login', array('company_name' => $company_name,'role'=>'manager'));
return $query->result();
}
public function get_all_staff($company_name)
{
$query = $this->db->get_where('user_login', array('company_name' => $company_name,'role !='=>'manager'));
return $query->result();
}

Answer 1

it is simply pass a var to show or hide.
in your controller file pass data['role_admin'] = 1;
in your view file
if($role_admin==1){
// show your Manager code
}

Answer 2

Add style="display:none" and disabled to manager select so it won't show up at load. Also selects don't need a value, if you want to set a specific option than you need to do it in the loops like this:
foreach($company_name as $row )
{
echo '<option value="'.$row->company_name.'" '.set_select('Subcom', $row->company_name).'>'.$row->company_name.'</option>';
}
Also it would be a good idea to move the form errors before the select and not wrap the options with it.
<script type="text/javascript">
$(document).ready(function(){
$('#Subcom,#role').on('change' , function() {
var company_name = $('#Subcom').val();
var role_name = $('#role').val();
if(company_name !== '' && role_name !== 'manager' && role_name !== 'admin')
{
$('#manager' ).prop('disabled', false);
$.ajax({
url:"<?php echo base_url()?>getManager",
type: "POST",
data: { 'company_name' : company_name},
dataType:'json',
success: function(data){
//alert('ok');
console.log(data);
$('#manager').html(data.manager);
$('#manager').show();
},
error: function(event){
console.log(event);
alert('Error occur...');
}
});
}
else
{
$('#manager').prop('disabled', true);
$('#manager').hide();
}
});
});
</script>
EDIT: for future reference here's the final code
https://jsfiddle.net/Lo50z6q8/