如何使用 jQuery 和 Ajax 拆分來自 select 元素的數據

Question

我的問題是拆分數據時。 我所做的是創建了 3 個<select>元素。 我管理並成功獲取數據並嘗試拆分它。 First select element is to choose a person, upon clicking it, it will display another data inside second element and then upon select the result will append it's corresponding data to the third select element. 問題我無法將它分開，當我嘗試拆分時它不起作用。

這是圖片

帶圓圈的表示它們是我的 ajax 中的單獨選項，它的變量名是'<option value="'.$row['section_model'].'">'. $row['section_model'].'</option>' '<option value="'.$row['section_model'].'">'. $row['section_model'].'</option>'我的目標是 append 到我的第三個 select 元素。 然后未圈出的那些意味着它應該留在標記為部門的選擇中。

第二張圖片是我希望有人可以幫助我如何拆分，然后 append 將我第一張圖片中的環繞數據放入我的第三個選擇元素中。

這是我的代碼

 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>