fill text box based select dropdown in laravel with relation table - ajax

Question

I want to display the role of data in a text box based on the selected user options. for example A user, role as project manager. then when selecting a user, the text box will display the role manager. but the problem is when I choose the first user, he displays the correct data in the text box. but when changing user choices, the text box does not change, only displays data based on the first choice. What is wrong.?
I want to display the role in the text box based on the user chosen
this my view
<div class="form-group">
<label>Name *</label>
<select class="form-control select2" style="width: 100%;" name="user_id" id="user_id">
<option selected="selected" value="user_id">Select One</option>
#foreach($users as $id => $user)
<option value="{{$id}}" data-price="{{$user_roles->name}}">{{$user}}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label for="">Role *</label>
<input type="text" name="name" id="name" class="form-control" autocomplete="off" readonly>
</div>
script
<script type="text/javascript">
$('#user_id').on('change', function(){
var price = $(this).children('option:selected').data('price');
$('#name').val(price);
});
</script>
controller
$projects = Project::pluck('project_name', 'id');
$users = User::pluck('name', 'id');
$user_roles = auth()->user()->role;
return view ('teams.create', compact('projects', 'users', 'user_roles'));
model user
<?php
namespace App;
use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use App\Presence;
use App\Models\Project;
use App\Productivity;
use App\Sick_leave;
use App\Annual_leave;
use App\Models\Team;
class User extends Authenticatable
{
use Notifiable;
/**
* The attributes that are mass assignable.
*
* #var array
*/
protected $fillable = [
'name', 'email', 'password', 'role_id',
];
/**
* The attributes that should be hidden for arrays.
*
* #var array
*/
protected $hidden = [
'password', 'remember_token',
];
public function presence()
{
return $this->hasOne(Presence::class, 'astrowatch', 'user_id', 'presence_id');
}
public function role()
{
return $this->belongsTo(Role::class, 'role_id');
}
public function permission()
{
return $this->hasMany(Permission::class);
}
public function teams()
{
return $this->belongsToMany(Team::class, 'user_teams');
}
public function spent_time()
{
return $this->belongsToMany(Spent_time::class, 'astrowatch', 'user_id', 'spent_time_id');
}
public function projects()
{
return $this->belongsToMany(Project::Class, 'user_projects');
}
}

Answer 1

Change your JS to this:
$(function() {
$('#user_id').on('change', function(){
var price = $(this).data('price');
$('#name').val(price);
});
});
-- EDIT--
Change this
Controller:
$users = User::all();
View:
#foreach($users as $user)
<option value="{{$user->id}}" data-price="{{$user->role->name}}">
{{$user->name}}
</option>
#endforeach