php - 为什么我不能在循环条件下使用链式 jquery？

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>
        <a href="<?php echo base_url();?>controller_admin/deleteEmployee/<?php echo $data->id_employee;?>"> <button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i></button></a>
      </form>
    </td>
<?php
  }
?>

<script src="<?php echo base_url();?>assets/js/jquery.chained.min.js"></script>
<script>
$("#department").chained("#directorate"); 
$("#section").chained("#department"); 
</script>

我想制作一个表格列表以显示链接下拉列表，如下所示：

和链式下拉的工作是这样的：

但是，它只会显示在第一行，在另一行，它不起作用。

你可以看起来像这样：

我希望我可以链接所有行的下拉列表。有人找到解决方案吗？

Answer 1

您可以尝试将您的 js 代码放在 ready 函数中 - 当您尝试选择元素时，甚至可能不会呈现这些元素。

<script>
$( document ).ready(function() {
    $("#department").chained("#directorate"); 
    $("#section").chained("#department"); 
});
</script>

参考：http ://learn.jquery.com/using-jquery-core/document-ready/