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

Posted 2023-03-14

【中文标题】使用 jQuery AJAX 将数据库默认值添加到下拉列表

【英文标题】：Add database default value to dropdown list using jQuery AJAX

【发布时间】：2018-08-06 17:29:57

【问题描述】：

我正在使用 jQuery AJAX 和 laravel 中的引导模式进行 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", …
      
    );
  );
);

我的控制器方法：

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>

【问题讨论】：

'@Bugfixer' 我已经编辑并添加了 console.log(data) 行。

console.log(data); 是否返回...您可以在浏览器控制台中查看吗...！

不，我想要 console.log 的输出。从成功中删除所有内容并仅写入 console.log(data)。然后检查您的浏览器控制台。你会看到输出。将结果粘贴到此处

尝试使用.attr("selected","selected"); 或.prop('selected', true)。

id: 2, user_id: 5, degree: "ssc", Division: "First", year: "2009", ...，这是我的控制台结果.我想在我的编辑模式中设置度数。

【参考方案1】：

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

改变这个：

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

收件人：

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

如果您真的更喜欢使用<option> 上的属性而不是<select> 的value，那么您需要将<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>

【参考方案2】：

如果您想通过 Ajax 使用来自控制器的响应数据，那么最好以 Json 格式返回它： 使用return response()->json($info); 而不是return $info;

我可以从您的 console.log 输出中看到您收到 degree: "ssc"，而 您的选择选项是SSC，因此您需要在使用前将数据大写：$('.degree').val(data.degree.toUpperCase()); 或将选择选项的值小写：<option value="ss">SSC</option>。