Add default database value to dropdown using jQuery AJAX

Question

I am working with a CRUD operation using jQuery AJAX and bootstrap modal in laravel. But the problem is when I want to edit something. I cannot fill out my drop-down list after requesting for AJAX success. How to set the default value for a database in my modified modal drop-down list?

My code is:

$(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 modified modal dropdown:

<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>

Answer 1

<select> selected, <option> s. , <select> . , .

:

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

To:

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

<option> value <select>, <option> jQuery :

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

:

$('.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>

Hide result

Answer 2

• Ajax, Json: return response()->json($info); return $info;

• console.log, degree: "ssc", SSC, : $('.degree').val(data.degree.toUpperCase()); : <option value="ss">SSC</option>.