Laravel使用AJAX实现二级联动下拉框返回NaN问题排查

1. 核心错误：字符串拼接符号误用 #

你在构造Option显示文本时错误使用了算术减号-，JS执行时会尝试把row.id（数字类型）和row.nomSociete（字符串类型）都转为数字做减法运算，nomSociete转数字失败就会返回NaN。
把减号替换为字符串拼接用的加号+即可，如果需要横杠作为分隔符，要把横杠用引号包裹成字符串：

// 错误写法
new Option(row.id- row.nomSociete ,row.id )
// 正确写法，示例显示格式为「1-XX贸易公司」
new Option(row.id + '-' + row.nomSociete ,row.id )

你注释掉的那行append代码也存在相同问题，row.id- row.nomSociete处的减号需要同步修改。

2. 可优化的次要问题 #

控制器代码优化 #

Laravel支持直接返回集合/数组，框架会自动转为JSON响应，不需要手动调用json_encode，同时你select查询里重复写了两次fournisseurs.id，可以删除冗余字段：

public function get_fournisseurs($id){
    $fou= DB::table('four_cat')
        ->join('fournisseurs','four_cat.four', '=', 'fournisseurs.id')
        ->where('four_cat.cat','=', $id)
        ->select('fournisseurs.id','fournisseurs.nomSociete','fournisseurs.tel')
        ->get();
    return response()->json(['data' => $fou]);
}

AJAX代码优化 #

每次切换第一个下拉框的选项时，先清空第二个下拉框的旧选项，避免多次切换后选项累加：

success: function(dataResult){
    var resultData = dataResult.data;
    // 清空已有选项
    $('#second-choice').empty();
    $.each(resultData,function(i,row){
        $('#second-choice').append(new Option(row.id + '-' + row.nomSociete ,row.id ));
    })
}

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