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

Question

我正在 Laravel 中使用 jQuery AJAX 和引导模式进行 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> s。但是，您实际上并不需要它，因为设置 <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>