Laravel中使用AJAX更新数据时如何设置下拉框选中值

问题解决方法 #

按照以下优先级排查即可：

1. 数据类型不匹配问题
   jQuery的val()方法赋值时会严格匹配值的类型，你通过Blade渲染的option的value本质是字符串类型，如果接口返回的data.product_plan是数字类型，就会出现匹配失败的情况。
   解决方法：统一二者类型，比如把返回值转成字符串再赋值：

$('#product_plan').val(String(data.product_plan));

如果返回值带多余空格，可以先做trim处理：

$('#product_plan').val(data.product_plan.toString().trim());

2. 使用了下拉框增强插件的问题
   如果你用了Select2、Bootstrap Select这类第三方下拉框插件，直接给原生select赋值不会触发插件的视图更新，赋值后需要手动触发change事件通知插件刷新：

$('#product_plan').val(data.product_plan).trigger('change');

如果是Select2插件也可以直接调用插件的赋值方法：

$('#product_plan').select2('val', data.product_plan);

3. ID重复或元素未加载完成问题

• 检查页面是否存在多个id="product_plan"的元素，jQuery只会匹配到第一个符合条件的元素，导致赋值到错误的节点上，修改为唯一ID即可，或者通过父级模态框限定选择范围：

// 替换为你实际的模态框ID
$('#editModal').find('#product_plan').val(data.product_plan);

• 如果你的下拉框是模态框打开后才动态渲染的，需要确保赋值操作在option渲染完成后执行。

4. 校验值是否存在匹配项
   可以通过以下代码打印对比option的值和返回值，确认是否真的存在匹配的选项：

// 打印所有option的value和类型
$('#product_plan option').each(function() {
    console.log('选项值：', $(this).val(), '类型：', typeof $(this).val());
});
// 打印接口返回的值和类型
console.log('接口返回值：', data.product_plan, '类型：', typeof data.product_plan);

内容的提问来源于stack exchange，提问作者Fathul Muiin