javascript - 使用 jQuery AJAX 将数据库默认值添加到下拉列表

Question

我正在使用 jQuery AJAX 和 laravel 中的 Bootstrap 模式进行 CRUD 操作。但问题是当我想编辑一些东西时。在 AJAX 成功请求后，我无法填充我的下拉列表。如何在我的编辑模式下拉列表中设置数据库默认值？

我的代码:

$(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", …}
      }
    });
  });
});

我的 Controller 方法:

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

我的编辑模态下拉列表:

<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

没有selected <select> 上的属性元素，它仅适用于 <option>秒。但是，您实际上并不需要它，因为设置 <select> 的值元素足以改变选择。但是您需要将值与正确的字母大小写完全匹配，因此您的大小写都是大写字母。

改变这个:

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

收件人:

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