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

Question

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

noonelikeme · Accepted Answer · 2020-04-30 05:04:35Z

1

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

answered Apr 30, 2020 at 5:04

noonelikeme

1044 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

noonelikeme Over a year ago

well if you can do one thing instead of change try click "$("#util").change(function()" here and try

noonelikeme Over a year ago

try onclick function

Software Developer Over a year ago

Instead of onchannge will change to onlick?

noonelikeme Over a year ago

yes, please try that part that might solve your problem

Software Developer Over a year ago

No. it has to do with onchange

|

noonelikeme · Accepted Answer · 2020-04-30 04:38:14Z

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.

answered Apr 30, 2020 at 4:38

noonelikeme

1044 bronze badges

1 Comment

Software Developer Over a year ago

Hi can you please post your code? i want to check on it. thank you

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related