如何使用 jQuery 和 Ajax 拆分来自选择元素的数据

Question

我的问题是拆分数据时。我所做的是创建了 3 个<select> 元素。我管理并成功获取数据并尝试拆分它。第一个选择元素是选择一个人，单击它时，它将在第二个元素中显示另一个数据，然后在选择时，结果会将其对应的数据附加到第三个选择元素。问题我无法将它分开，当我尝试拆分时它不起作用。

这是图片

带圆圈的表示它们是我的 ajax 中的分隔选项，它的变量名是 '<option value="'.$row['section_model'].'">'. $row['section_model'] .'</option>'，我的目标是将它附加到我的第三个选择元素中。然后未圈出的表示它应该留在标记为部门的选择中。

第二张图片是我希望有人可以帮助我如何分割然后附加第一张图片中的环绕数据并放入我的第三个选择元素中的地方。

这是我的代码

function ToolsChange(element) {
  let tools_controller = $(element).val();
  if (tools_controller) {

    $.ajax({
      type: "post",
      url: "form_ajax_for_request.php",
      data: {
        "tools_cont": tools_controller
      },
      success: function(response) {
        // alert(response);
        var dataSplit = response;
        var shouldSplit = dataSplit.split("@");
        // alert(shouldSplit[1]);
        $('#sel_requested_dept').html('');
        $('#sel_requested_dept').append(response);
        $('#sel_requested_dept').selectpicker('refresh');

        $('#sel_requested_section').html('');
        $('#sel_requested_section').append(shouldSplit[2]);
        $('#sel_requested_section').selectpicker('refresh');
      }
    });

  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label> Tools Controller: </label>
  <select class="form-control selectpicker" name="tools_controller" data-live-search="true" onchange="ToolsChange(this)" required>
    <option value="" selected disabled> Select Tools Controller </option>
    <?php
      $query = "SELECT * FROM tools_dept_registration";
      $con->next_result();
      $result=mysqli_query($con,$query);
      if(mysqli_num_rows($result)>0)
      {
         while($row=mysqli_fetch_assoc($result))
         {
          echo '<option value="'.$row['name_of_controller'].'">'. $row['name_of_controller'] 
          .'</option>';
         }
      }                                               
   ?>
  </select>
</div>

<div class="form-group">
  <label> Department </label>
  <select name="request_dept" id="sel_requested_dept" class="form-control selectpicker" data-live- 
    search="true" required>
    <option value="" selected disabled> Select Department </option>

  </select>
</div>


<div class="form-group">
  <label> Section/Model </label>
  <select name="request_section_model" id="sel_requested_section" class="form-control selectpicker" data-live-search="true" required>
    <option value="" selected disabled> Select Section/Model </option>

  </select>
</div>

我的 ajax/php 中的完整代码

<?php 

include("../include/connect.php");

 
    if(isset($_POST['tools_cont'])){

        $ID = $_POST['tools_cont'];

        $query = "SELECT * FROM tools_dept_registration 
        RIGHT JOIN tools_section_model_reg ON tools_section_model_reg.dept_id = tools_dept_registration.ID
        WHERE name_of_controller = '$ID'";
        $con->next_result();
        $result=mysqli_query($con, $query);
        
        if(mysqli_num_rows($result)>0)
        {
            while($row = mysqli_fetch_assoc($result))
            {
                echo "@" . '<option value="'.$row['dept_name'].'">'. $row['dept_name'] . " - " . $row['ass_leader'] . '</option>' 
                . "@" .'<option value="'.$row['section_model'].'">'. $row['section_model'] .'</option>';
            }
        }
    }
?>

Answer 1

您可以使用for-loop 迭代拆分值并检查i 的值是否取决于此将您的选项添加到所需的选择框。

演示代码：

function ToolsChange(element) {
  let tools_controller = $(element).val();
  if (tools_controller) {

    /*$.ajax({
      //your other,,code..
      success: function(response) {*/
    //suppose reponse look like this
    var response = '@<option value=C>C - D</option>@<option value=S>Sm</option>@<option value=D>D - E</option>@<option value=S1>Sm1</option>@<option value=M>D - M</option>@<option value=S2>Sm2</option>'
    var dataSplit = response;
    $('#sel_requested_dept').html('');
    $('#sel_requested_section').html('');
    var shouldSplit = dataSplit.split("@");
    for (var i = 0; i < shouldSplit.length; i++) {
      //check if at even position 
      if (i % 2 == 0) {
        $('#sel_requested_section').append(shouldSplit[i]);
      } else {
        $('#sel_requested_dept').append(shouldSplit[i]);
      }

    }
    $('#sel_requested_dept').selectpicker('refresh');
    $('#sel_requested_section').selectpicker('refresh');
    /*}
    });*/

  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/css/bootstrap-select.min.css">

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/js/bootstrap-select.js"></script>
<div class="form-group">
  <label> Tools Controller: </label>
  <select class="form-control selectpicker" name="tools_controller" data-live-search="true" onchange="ToolsChange(this)" required>
    <option value="" selected disabled> Select Tools Controller </option>
    <option value="A"> A </option>
    <option value="B"> B </option>
  </select>
</div>

<div class="form-group">
  <label> Department </label>
  <select name="request_dept" id="sel_requested_dept" class="form-control selectpicker" data-live- search="true" required>
    <option value="" selected disabled> Select Department </option>

  </select>
</div>


<div class="form-group">
  <label> Section/Model </label>
  <select name="request_section_model" id="sel_requested_section" class="form-control selectpicker" data-live-search="true" required>
    <option value="" selected disabled> Select Section/Model </option>

  </select>
</div>