使用关系表填充基于拉拉维尔的选择下拉列表

Question

我想根据选定的用户选项在文本框中显示数据的角色。 例如，用户，作为项目经理的角色。 然后选择用户时，文本框将显示角色管理器。 但问题是当我选择第一个用户时，他在文本框中显示正确的数据。 但是当更改用户选择时， 文本框不会更改，仅显示基于第一个选项的数据。怎么了。？

我想根据所选用户在文本框中显示角色

这是我的观点

<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 type="text/javascript">
$('#user_id').on('change', function(){
var price = $(this).children('option:selected').data('price');
$('#name').val(price);
});
</script>

控制器

$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'));

模型用户

<?php
namespace App;
use IlluminateNotificationsNotifiable;
use IlluminateContractsAuthMustVerifyEmail;
use IlluminateFoundationAuthUser as Authenticatable;
use AppPresence;
use AppModelsProject;
use AppProductivity;
use AppSick_leave;
use AppAnnual_leave;
use AppModelsTeam;
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

将 JS 更改为：

$(function() {
$('#user_id').on('change', function(){
var price = $(this).data('price');
$('#name').val(price);
});
});

--编辑--

更改此内容

控制器：

$users = User::all();

视图：

@foreach($users as $user)
<option value="{{$user->id}}" data-price="{{$user->role->name}}"> 
{{$user->name}}
</option>                    
@endforeach