Why I can't use chained jquery in loop condition? - php

Question

<?php
foreach ($employee as $data) {
?>
<tr>
<td>
<form action="<?php echo base_url();?>controller_admin/updateEmployee/<?php echo $data->id_employee;?>" method="post">
<select style="width: 100px; height: 33px;" name="directorate" id="directorate">
<option selected value="<?php echo $data->id_directorate ?>"><?php echo $data->directorate ?></option>
<?php
foreach ($directorate as $key) {
if ($data->directorate != $key->directorate) {?>
<option value="<?php echo $key->id_directorate ?>">
<?php echo $key->directorate; ?>
</option>
<?php
}
}
?>
</select>
</td>
<td>
<select style="width: 100px; height: 33px;" name="department" id="department">
<?php if ($data->id_department!=null) {?>
<option value="0"></option>
<?php
} ?>
<option selected value="<?php echo $data->id_department ?>"><?php echo $data->department; ?></option>
<?php
$value = 1;
foreach ($department as $key) {
if ($data->department != $key->department) {?>
<option
class="<?php echo $key->id_directorate ?>"
value="<?php echo $value ?>">
<?php echo $key->department; ?>
</option>
<?php
$value++;
}
}
?>
</select>
</td>
<td>
<select style="width: 100px; height: 33px;" name="section" id="section">
<?php if ($data->id_section!=null): ?>
<option value="0"></option>
<?php endif ?>
<option selected value="<?php echo $data->id_section ?>"><?php echo $data->section; ?></option>
<?php
$value = 1;
foreach ($section as $key) {
if ($data->section != $key->section) {?>
<option
class="<?php echo $key->id_department ?>"
value="<?php echo $value ?>">
<?php echo $key->section; ?>
</option>
<?php
$value++;
}
}
?>
</select>
</td>
<td>
<button type="submit" class="btn btn-warning"><i class="fa fa-edit"></i></button>
<button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
</form>
</td>
<?php
}
?>
<script src="<?php echo base_url();?>assets/js/jquery.chained.min.js"></script>
<script>
$("#department").chained("#directorate");
$("#section").chained("#department");
</script>
I want to make a list of table to display chained dropdown to display like this:
and chained dropdown work like this:
but, it will display in first row only, at another row, it does not work.
You can look like this:
I hope I can chained dropdown for all rows. Anyone find the solution?

Answer 1

you could try to put your js code inside the ready function - its possible that the elements are not even rendered when you try to select them.
<script>
$( document ).ready(function() {
$("#department").chained("#directorate");
$("#section").chained("#department");
});
</script>
reference: http://learn.jquery.com/using-jquery-core/document-ready/