Question

美好的一天，我对多重选择表单有疑问，只有第一个具有选项，第二个根据第一个的选择用ajax填充，而第三个根据选择的第一个填充第二等等。

当我单击按钮时，我会向该表单发送参数，以便选择适当的选项，这些选项是在加载DOM之后创建的，而我无法使用$（element）.prop（'selected' true）;

如果我检查第二个选择项，它会根据第一个选择项的选择填充选项，但是我无法选择第二个选择项的选项，依此类推，如何解决呢？

感谢您的帮助。

HTML /编辑按钮jquery：

$('#example tbody').on("click", "#edit", function(e) {
  button = 'edit';
  e.preventDefault();
  $('#addProduct').modal('show');

  var c = $(this).data('con');
  var typ = $(this).data('typ');
  var va = $(this).data('va');
  var s = $(this).data('s');
  var b = $(this).data('b');

  $('#conservation option:contains("' + c + '")').prop('selected', true);
  $("#conservation").change();

  $('#type option:contains("' + typ + '")').prop('selected', true);
  $("#type").change();

  $('#variant option:contains("' + va + '")').prop('selected', true);
  $("#variant").change();

  $('#size option:contains("' + s + '")').prop('selected', true);
  $("#size").change();

  $('#box option:contains("' + b + '")').prop('selected', true);
  $("#box").change();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="col-md-12">
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">Product type <small style="color: #FF0000;">*</small></label>
    <!-- <label class="col-sm-3 col-form-label">Conservation <small style="color: #FF0000;">*</small></label> -->
    <div class="col-sm-9">
      <select class="form-control poptions" name="conservation" id="conservation">
        <?php
                        $query="SELECT * FROM `conservation`;";
                        echo '<option value="" selected>Choose...</option>';
                        if ($exec = $conn->query($query)) {
                          while ($res = $exec->fetch_row()) {
                            echo '<option value="'.$res['0'].'">'.$res['1'].'</option>';
                          }
                         $exec->free();
                        }
                      ?>
      </select>
    </div>
  </div>
</div>
<div class="col-md-12">
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">Product Presentation <small style="color: #FF0000;">*</small></label>
    <!-- <label class="col-sm-3 col-form-label">Type <small style="color: #FF0000;">*</small></label> -->
    <div class="col-sm-9">
      <select class="form-control poptions" name="type" id="type">
      </select>
    </div>
  </div>
</div>

Ajax加载下一个选择

$(document).on('change', '#conservation', function() {
  var id = $(this).val();
  var dataString = 'id=' + id;


  $.ajax({
    type: "POST",
    url: "fetchProType.php",
    data: dataString,
    cache: false,
    success: function(html) {
      $("#type").html(html);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

PHP（fetchProType.php）返回ajax


if($_POST['id']){
    $id=$_POST['id'];

    $sql="SELECT B.* FROM product A INNER JOIN producttype B ON B.idProductType = A.idProductType WHERE A.idConservation = '".$id."' AND A.idSA_Status = '1' GROUP BY name;";

    $options = '<option value="" selected>Choose...</option>';
    if ($exec = $conn->query($sql)) {
        $num_rows = $exec->num_rows;

        while($res= $exec->fetch_row()){
            $options .= '<option value="'.$res['0'].'">'.$res['1'].'</option>';
        }
    }
    echo $options;
}

选择选项在多选择表单上在dom之后动态创建

0 个答案: