为什么在循环条件下不能使用链式jQuery?

时间:2018-08-07 18:22:04

标签: php loops chained-select

  <?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>

我想创建一个表列表以显示链接的下拉菜单,如下所示:

enter image description here

和链接的下拉菜单如下所示: enter image description here

但是,它将仅显示在第一行,而在另一行,则不起作用。

您可以看起来像这样: enter image description here

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

1 个答案:

答案 0 :(得分:0)

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

const SMALL_WIDTH_BREAKPOINT = 960;
@Component({
  selector: 'app-mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})

export class TrackingComponent implements OnInit { 
  currentLang = 'es';
  private mediaMatcher: MediaQueryList = matchMedia(`(max-width: 
  ${SMALL_WIDTH_BREAKPOINT}px)`);
  constructor(
    public translate: TranslateService,
    zone: NgZone,
    private router: Router,
  ) {
    const browserLang: string = translate.getBrowserLang();
      translate.use(browserLang.match(/en|es/) ? browserLang : 'es');
      this.mediaMatcher.addListener(mql => zone.run(() => {
        this.mediaMatcher = mql;
      }));
      translate.use(this.currentLang);
  }

  ngOnInit() { }

  myFunction(msg: string) : {
    const translatedText = msg; // HERE IS WHERE I WANT TO USE THE TRANSLATE SERVICE BUT I DON'T KNOW HOW TO CALL IT
    alert(translatedText );
  }

}

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