Выберите опцию динамически создавать после dom в форме множественного выбора - PullRequest
Новая
       23

Выберите опцию динамически создавать после dom в форме множественного выбора

1 голос
/ 01 июня 2019

Добрый день, у меня проблема с формой множественного выбора, только первая имеет опции, вторая заполняется ajax в соответствии с выбором первой, а третья заполняется в соответствии с выборомвторой и т. д.

Когда я нажимаю кнопку, я отправляю параметры в эту форму, чтобы выбрать соответствующие параметры, эти параметры создаются после загрузки DOM, и я не могу выбрать их с помощью элемента $ () .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;
}
...