javascript - How can I link data to a select element in AJAX method?

Question

I have a problem wherein I cannot put the data inside select element and make an option using the ID to append on what is inside my ajax. I got the data and it is showing in an input element but when I switched it into select element it doesn't work.

Here is the image of my form

JQuery / Ajax code

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

    if (tools_id) {

        $.ajax({
            type: "post",
            url: "form_JSON_approach.php",
            data: {
                "tools_id": tools_id
            },
            success: function(response) {
                var dataSplit = response;
                console.log(response);
                var shouldSplit = dataSplit.split("@");
                var shouldNotSplit = dataSplit.split();
                console.log(shouldSplit);
                console.log(shouldSplit[0]);
                console.log(shouldSplit[1]);
                console.log(shouldSplit[2]);
                $("#sel_control_num").val(shouldSplit[0]);

                var specs = [];
                for (i = 1; i < shouldSplit.length; i += 3) {
                    specs.push(shouldSplit[i])
                }

                $("#sel_tools_spec").val(specs.join(', '));

                $("#sel_tools_id").val(shouldSplit[2]);
            }
        });
    }
  }

HTML code(I had to comment select element because it is not showing the data)

<div class="form-group">
     <label> Tools Specification: </label>
     <input id="sel_tools_spec" class="form-control" name="tools_specification"
      data-live-search="true" readonly>
<!-- <select id="sel_tools_spec" class="form-control selectpicker" data-live-search="true">
      </select> -->
</div>

PHP code

    <?php 

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

 
    if(isset($_POST['tools_id'])){
        
        $ID = $_POST['tools_id'];

        $query = "SELECT tools_masterlist.control_no, tools_masterlist.tools_id, 
        tools_masterlist.tools_name, 
        tools_spec.model_num,tools_spec.model_num_val, tools_spec.status
        FROM tools_masterlist LEFT JOIN tools_spec ON tools_masterlist.tools_id = tools_spec.tools_id
        LEFT JOIN tools_registration ON tools_masterlist.control_no = tools_registration.reg_input 
        WHERE status = 1 AND tools_name = '$ID'";

        $con->next_result();
        // $result=mysqli_query($con, "CALL GetAjaxForToolsRegistration('$ID')");
        $result=mysqli_query($con, $query);
        if(mysqli_num_rows($result)>0)
        {
            while($row = mysqli_fetch_assoc($result))
            {
                // echo $row['control_no'] . "@" . $row['model_num'] . "@" . $row['tools_id'] ."@";
                echo $row['control_no'] . "@" . '<option value="'.$row['tools_id'].'">'. 
                $row['model_num'] .'</option>' . "@" . $row['tools_id'] ."@";
            }
        }
        else
        {
          
        }

    }
  ?>

question from:https://stackoverflow.com/questions/65894461/how-can-i-link-data-to-a-select-element-in-ajax-method

Answer 1

You are appending all datas at onces instead inside for-loop you can directly append options inside your selectpicker and refresh it.

Demo Code :

$("#sel_tools_spec").selectpicker() //intialize on load
ToolsChange() //just for demo..
function ToolsChange(element) {
  /*let tools_id = $(element).val();

  if (tools_id) {

    $.ajax({
      type: "post",
      url: "form_JSON_approach.php",
      data: {
        "tools_id": tools_id
      },
      success: function(response) {*/
  //other codes....
  $("#sel_tools_spec").html('');
  //suppose data look like this...
  var shouldSplit = ["1", "<option>A</option>", "1001", "2", "<option>B</option>", "1001"]
  for (i = 1; i < shouldSplit.length; i += 3) {
    //append options inside select-box
    $("#sel_tools_spec").append(shouldSplit[i]);
  }
  $("#sel_tools_spec").selectpicker('refresh'); //refresh it
  /* }
    });*/
}

<link rel="stylesheet " type="text/css" 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.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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.2/js/bootstrap-select.min.js"></script>
<div class="form-group">
  <label> Tools Specification: </label>
  <select id="sel_tools_spec" class="form-control selectpicker" data-live-search="true">
  </select>
</div>