Question posted in
You can find the official documentation here.

Refresh the select dropdown data upon selecting using Ajax in Laravel 5.4 – Jquery ajax

Hi i have this select dropdown in Ajax pass the data to the server then display to my select dropdown. The code works very well. Now my problem is i want that upon selecting the data the other select dropdown will refresh base on the selected one. Here is my Ajax code below

 $("#util").change(function(){
          const util =  $(this).children("option:selected").val();

          //make ajax call
          $.ajax({
              type: "GET",
              url:'/dno-personal/get-data/' + util,
              data:{
                _method: 'get',
                "id":util
              },
              success:function(data){
                var docu = $('#docu');
                console.log(data);

                data.forEach(function(val, index){
                    console.log(val.document_name);
                    docu.append(
                                $('<option></option>').val(val.document_name).html(val.document_name)
                          );
                });

              },
              error:function(data){
                console.log('Error:', data);
              }

          });
      });

my html select 

 <div id="documentList" class="col-lg-2">
                                              <label>Document List</label>
                                              <select id="docu" name="" class="selcls form-control">
                                              </select>
                                          </div>

my process in server in php

//
    public function getData($id){
        $getDocuments = DnoPersonalUtility::where('pu_id', $id)->get()->toArray();

        return response()->json($getDocuments); 

    }

Can someone help me figured this thing out? Tia

Tags:

2

Answers


  1. 0

    In this case, first, select the value on the basis of which you want your second dropdown values to be changed via var id = e.options[e.selectedIndex].value; then on click of your first dropdown post that value to ajax and as per your code appends the value to your second dropdown.

    Login or Signup to reply.
  2. 0 
    function run() {
  var e = document.getElementById("ddlViewBy");
  var id = e.options[e.selectedIndex].value;
  $('#pt_iddd').val(id);
  $.ajax({
    url:"<?php echo $link_url; ?>data/customer.php",
    method:"POST",
    data:{query1:id},
    success:function(data3){
      document.getElementById("fee").innerHTML=data3;
    }
  });
}
$(document).ready(function(){
  $("#ddlViewBy").click(function(){
    var query = $('#pt_iddd').val();
    if(query != ''){
      $.ajax({
        url:"<?php echo $link_url; ?>data/details.php",
        method:"POST",
        data:{query:query,i:"da"},
        success:function(data){
          $('#mySelect').html(data);
        }
      });
    }
  });
});


<select class="form-control" onchange="run()" id="ddlViewBy">
   have your option code here
</select>
<select class="form-control" id="mySelect">
</select>

    This is the script I used

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search