CODEWITHSUNDEEP
javascriptjqueryhtmlajaxlaravel
Gabrielle-M
Gabrielle-M

Reputation: 1077

Add database default value to dropdown list using jQuery AJAX

I'm working with CRUD operation using jQuery AJAX and bootstrap modal in laravel. But the problem is when I want to edit something. I can't populate my dropdown list after an AJAX success request. How can I set database default value in my edit modal Dropdown List?

My Code:

$(document).ready(function() {
  $('.acedit').click(function() {
    $('#form')[0].reset();
    $('#modal_form').modal('show'); // show bootstrap modal
    var id = $(this).data('id');
    $.ajax({
      url: "{{route('academic.edit')}}",
      method: 'post',
      data: {
        id: id,
        '_token': "{{csrf_token()}}"
      },
      success: function(data) {
        //$('#mycontrolId').selectmenu('refresh').val(myvalue).attr("selected", "selected");
        $('.degree').val(data.degree).attr('selected', true);
        $('.divison').val(data.division);
        $('.year').val(data.year);
        console.log(data); //{id: 2, user_id: 5, degree: "ssc", division: "First", year: "2009", …}
      }
    });
  });
});

My Controller Method:

public function acadedit(Request $request){
    $id=$request->id;
    $info=Academic::find($id);
    return $info;
}

My edit modal Dropdown list:

<select class="form-control degree">
    <option value="">-Select Degree-</option>
    <option value="SSC">SSC</option>
    <option value="HSC">HSC</option>
    <option value="BBA">BBA</option>
    <option value="MBA">MBA</option>
</select>

Upvotes: 2

Views: 2146

Answers (2)

Racil Hilan
Racil Hilan

Reputation: 25341

There is no selected attribute on the <select> element, it's only for the <option>s. However, you don't really need it, because setting the value of the <select> element is enough to change the selection. But you need to match the value exactly with the proper letter casing, so all capital letters in your case.

Change this:

$('.degree').val(data.degree).attr('selected',true);

To:

$('.degree').val(data.degree.toUpperCase());

If you really prefer to do it with the attribute on the <option> instead of the value of the <select>, then you need to add the <option> to the jQuery selector like this:

$('.degree option[value=' + data.degree.toUpperCase() + ']').attr('selected', true);

Demo:

$('.degree option[value=SSC]').attr('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control degree">
  <option value="">-Select Degree-</option>
  <option value="SSC">SSC</option>
  <option value="HSC">HSC</option>
  <option value="BBA">BBA</option>
  <option value="MBA">MBA</option>
</select>

Upvotes: 2

Alex
Alex

Reputation: 2775

  1. If you want to use response data from your Controller by Ajax, then it better to return it in Json format: Use return response()->json($info); instead of return $info;

  2. As I can see from your console.log output you receive degree: "ssc", whereas your select option is SSC, so you need to uppercase the data before use it: $('.degree').val(data.degree.toUpperCase()); or to downcase values of select options: <option value="ss">SSC</option>.

Upvotes: 0

Related Questions