Display selected user name and other data to field

Hi Guys, can you help me how to display both first name and last name in select option?

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-form-label">Full Name</label>
                                    <select class="select selects-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true" id="fname" name="fname">
                                        <option value="">-- Select --</option>
                                        @foreach ($userList as $key=>$user )
                                            <option value="{{ $user->fname and $user->lname }}" data-employee_id={{ $user->rec_id }} data-email={{ $user->email }} data-date_hired={{ $user->join_date }}>{{ $user->fname and $user->lname }}</option>
                                        @endforeach
                                    </select>   
                                </div>
                            </div>



<script>
    // select auto id, email and Date Hired
    $('#fname').on('change',function()
    {
        $('#employee_id').val($(this).find(':selected').data('employee_id'));
        $('#email').val($(this).find(':selected').data('email'));
        $('#date_hired').val($(this).find(':selected').data('date_hired'));
    });
</script>



public function cardAllEmployee(Request $request)
{
    $users = DB::table('users')
                ->join('employee_profile', 'users.rec_id', '=', 'employee_profile.employee_id')
                ->select('users.*', 'employee_profile.date_hired', 'employee_profile.gender', 'employee_profile.company')
                ->get();
    $userList = DB::table('users')->get();
    return view('employee.employeecard',compact('users','userList'));
}