当使用动态表格YII2动态生成ID时如何使用onchange

Question

我有多个下拉列表，其ID由wbraganca动态表单自动生成，例如：第一个下拉菜单将具有ID，例如：＃formquestion-0-formquestiontypeid，第二个下拉菜单将具有以下ID：＃formquestion-1-formquestiontypeid，n-dropdown的ID如：＃formquestion-（n-1）-formquestiontypeid

我想在每个下拉菜单中调用ONCHANGE。但是我不知道该ID，因为该ID是由wbraganca动态表单自动生成的。

$('#formquestion-{$i}-formquestiontypeid').change(function(){console.log('enter');});

我在动态表单For Loop中尝试了这个jquery代码但是，jQuery ID仅响应具有ID的下拉列表：＃formquestion-0-formquestiontypeid

<?php
    foreach ($formQuestionModels as $i => $formQuestionModel): 
?>
  <div class="item panel panel-default">
    <!-- widgetBody -->
    <div class="panel-heading">
      <h3 class="panel-title pull-left">Question</h3>
      <div class="pull-right">
        <button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
        <button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
        <?php 
                  $Formquestiontype=Formquestiontype::find()->all();
                  $listData=ArrayHelper::map($Formquestiontype,'formQuestionTypeID','formQuestionTypeName');

                  echo $form->field($formQuestionModel, "[{$i}]formQuestionTypeID")->dropDownList(
                          $listData,
                          [   
                              'class' => "",
                              'prompt' =>'Select...'
                          ]);                          

                  $this->registerJs("                                         
                      $('#formquestion-{$i}-formquestiontypeid').change(function(){
                          var value = this.value;
                          console.log(value);
                      });

                  ");
              ?>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="panel-body">
      <?php
              // necessary for update action.
              if (!$formQuestionModel->isNewRecord) {
                  echo Html::activeHiddenInput($formQuestionModel, "[{$i}]id");

              }
          ?>
        <?= $form->field($formQuestionModel, "[{$i}]formQuestionName")->textInput(['maxlength' => true]) ?>
          <div class="row">
            <div class="col-sm-6">
              <?= $form->field($formQuestionModel, "[{$i}]formDescription")->textInput(['maxlength' => true]) ?>
            </div>
            <div class="col-sm-6">
              <?= $form->field($formQuestionModel, "[{$i}]formRequired")->textInput(['maxlength' => true]) ?>
            </div>
          </div>
          <!-- .row -->
          <div class="row">
            <div class="col-sm-4">
              <!-- <?= $form->field($formQuestionModel, "[{$i}]formQuestionTypeID")->textInput(['maxlength' => true]) ?> -->
            </div>
            <div class="col-sm-4">
              <?= $form->field($formQuestionModel, "[{$i}]formImage")->textInput(['maxlength' => true]) ?>
            </div>
            <div class="col-sm-4">
              <?= $form->field($formQuestionModel, "[{$i}]formQuestionPosition")->textInput(['maxlength' => true]) ?>
            </div>
            <div class="col-sm-4">
              <?= $form->field($formQuestionModel, "[{$i}]formQuestionSection")->textInput(['maxlength' => true]) ?>
            </div>
          </div>
          <!-- .row -->
    </div>
  </div>
  <?php endforeach; ?>

Answer 1

此问题已解决，我只需要在此JQUERY代码内插入我所有的jquery：