How Can I Link Data To A Select Element In AJAX Method?

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 inp

Solution 1:

Don't need to split() or even return your response using echo ... @... @... .. Ok here is what you should do

The main idea in my code is: returning all the data from php/database then control it in js/ajax and this will happen by using dataType : 'json' and echo json_encode($data)

in php

$return_result = [];
if(mysqli_num_rows($result)>0)
{
   while($row = mysqli_fetch_assoc($result))
   {
       $return_result[] = $row;
   }
}
else
{
    $return_result['error'] = 'error';      
}
echo json_encode($return_result);

in javascript (ajax)

$.ajax({
    type: "post",
    url: "form_JSON_approach.php",
    dataType : 'json', // <<<<<<<<<<< here
    data: {
        "tools_id": tools_id
    },
    success: function(response) {
       if(!response.error){
         //console.log(response);
         $.each(response , function(index , val){
           // here you can start do your stuff append() or anything you want
           console.log(val.control_no);
           console.log(val.tools_id);
         });
       }else{
         console.log('You Have Error , There is Zero data'); 
       }
     }
});

Solution 2:

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>

Solution 3:

Since you are using bootstrap. Just do the following

$("#sel_tools_spec").empty().append('<option value="ID">LABEL</option>').selectpicker('refresh');

Source: how to append options in select bootstrap?