当id自动完成时,下拉列表为空

时间:2018-06-13 09:13:38

标签: javascript php laravel

已选择的“添加目标”按钮将我们引导到下面的界面,允许我们在选择了“metier”和“tache”之后添加“tarification”。技术人员ID框自动完成。我的问题是我总是发现“Metier”列表是空的。

但是当我手动选择技师ID时,metier列表不再为空。 感谢。

请注意,每个技术人员都有一个metier列表,每个“metier”都有一个相关的tache列表

enter image description here

tarificationcontroller.php

public function create($technicien_id = null)   
{
    $technicien = technicien::orderBy('id','desc')->get();
 $taches = Tache::orderBy('libelle_tache', 'asc')->get();
    $metiers = Metier::orderBy('libelle_metier', 'asc')->get();
    >with('technicien', $technicien)->with('metiers', $metiers)- 
    >with('technicien_id', $technicien_id);
}

create.blade.php

@extends('Layouts/app')
@extends('Layouts.master')
@section('content')
@if(count($errors))
<div class="alert alert-danger" role="alert">
<ul>
@foreach($errors ->all() as $message)
<li>{{$message}}</li>
@endforeach
</ul>
</div>
@endif
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" 
    </script>
<script type="text/javascript">
var getMetiersByTechnicienUrl = "{{url('/metiersbytechnicien')}}";
var getTachesByMetierUrl = "{{url('/tachesbymetier')}}";
//console.log(getMetiersByTechnicienUrl,getTachesByMetierUrl 
,getTarificationsByTacheUrl);
function getMetiersByTechnicien(val) {
if(val.length>0) {
    var technicien_id = val;
    $.get(getMetiersByTechnicienUrl+'/'+technicien_id,function(res) 
{ var html = '<option value=">-Select-"' ; 
$.each(res.metiers,function(index,item) { 
html+=''+item.libelle_metier+''; }); $('#metiers').html(html);

    });
}
}

function getTachesByMetier(val) {
if(val.length>0) {
    var metier_id = val;
    $.get(getTachesByMetierUrl+'/'+metier_id,function(res) {
        var html = '<option value="">-Select-</option>' ;
        $.each(res.taches,function(index,item) {
            html+='<option 
value="'+item.id+'">'+item.libelle_tache+'</option>';
        });
        $('#taches').html(html);

    });
}
}
</script>
<div class="container">
<div class="row"></div>
<div class="col-md-12">

<div class="col-md-10">
    <h1>Tarification tache</h1>
<form action=" {{url ('tarification')  }}" method="post">
 {{csrf_field()}}
 <div class="form-group">
    <label for="technicien">Technicien</label>
       <select onchange="getMetiersByTechnicien(this.value)" 
 name="technicien_id" id="technicien_id" class="form-control">
               <option value="">-Select-</option>
               @foreach($technicien as $t)
                      <option value="{{$t->id }}" {{ $t->id == 
 $technicien_id ? 'selected = "selected"' : '' }}>
                            {{$t->user->nom}}
                      </option>
               @endforeach
        </select>
 </div>
 <div class="form-group">
    <div class="col-md-12">
            <div class="col-md-4">
    <label>Metier: </label>
    <select onchange="getTachesByMetier(this.value)" style="width: 
 200px" class="productm form-control" id="metiers">
        <option value="">-Select-</option>
   </select>
            </div>
            <div class="col-md-4">                                      
                <label>tache: </label>
                <select style="width: 200px" class="productname 
  form-control" name="tache_id" id="taches">
                    <option value="">-Select-</option>
                </select>
            </div>
            <div class="col-md-4">
                <label>tarification: </label>
                <input style="width: 200px" class="productname form- 
  control" type="text"  name ="Tarif" class="form-control" value=" 
  {{old('tarif')}}">

 </div>
 </div>
  </div>
   <div class="form-group">
   <input type="submit" value = "enregistrer" class="form-control 
   btn btn-primary">
    </div>
    </div>
        </div>

       </div>
<link 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/    
bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
@endsection

metiercontroler.php

public function getMetiersByTechnicien($technicien_id)
{

    $t = technicien::find($technicien_id);
    return response()->json(['metiers' => $t->metier]);
}

route.php

Route::get('tarification/create/{technicien_id?}', 
'TarificationController@create');

1 个答案:

答案 0 :(得分:0)

对于技术人员选择,您将使用技术人员数据填充它,如下所示:

@foreach($technicien as $t)
            <option value="{{$t->id }}" {{ $t->id == 
 $technicien_id ? 'selected = "selected"' : '' }}>
             {{$t->user->nom}}
             </option>
 @endforeach

对于metier select,没有数据传递,因此当你检查select时没有数据可用:

<select onchange="getTachesByMetier(this.value)" style="width: 
 200px" class="productm form-control" id="metiers">
        <option value="">-Select-</option>
</select>

您需要做的是:

  • 由于您已经知道技术人员默认选择的技术人员,请为您找到所有工作(您已经有代码在控制器中执行 getMetiersByTechnicien($ technicien_id)因此传递此数据并在加载时填充作业选择。

技术人员选择在加载时不会更改,因此只有在您手动更改技术人员选择时才会触发onChange()事件。

我希望这能解决你的问题,如果确实如此,请标记我的答案;)