[英]How to add dropdown-menu based on other dropdown-menu using Ajax call in Laravel?
I'm having two dropdown fields which is based on one another Class & Section. 我有两个下拉字段,它们基于另一个Class&Section。 I want
我想要
Select * from sections where class_id=selected Class Id.
I used java script to manage that but it is not working for me. 我使用java脚本来管理它,但它不适合我。
My dropdown fields 我的下拉字段
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<label>Category</label>
<select class="form-control" name = "class">
<option value="0">Please Select Category</option>
@foreach($classses as $classs)
<option value="{{$classs->id}}">{{$classs->title}}</option>
@endforeach
</select>
</div>
</div>
<div>
<div class="col-md-6">
<label>Products</label>
<select class="form-control" name = "section">
<option value="0">Please Select Product</option>
@foreach($sections as $section)
<option value="{{$section->id}}">{{$section->title}}</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
JavaScript JavaScript的
<script>
jQuery(document).ready(function ($) {
$('select[name=classs]').on('change', function () {
var selected = $(this).find(":selected").attr('value');
$.ajax({
url: base_url + '/classs/'+selected+'/sections/',
type: 'GET',
dataType: 'json',
}).done(function (data) {
var select = $('select[name=section]');
select.empty();
select.append('<option value="0" >Please Select Product</option>');
$.each(data,function(key, value) {
select.append('<option value=' + key.id + '>' + value.title + '</option>');
});
console.log("success");
})
});
});
Route 路线
Route::get('/dropdown','DropDownController@index');
Route::get('classs/{id}/sections', 'DropDownController@getSection');
Dropdown Controller 下拉控制器
public function index(){
$classses = Classs::all();
$sections =Section::all();
return view('classs.a', compact('classses','sections'));
}
public function getSection($id){
if($id!=0){
$sections = Classs::find($id)->sections()->select('id', 'title')->get()->toArray();
}else{
$sections = Section::all()->toArray();
}
return response()->json($sections);
}
}
Classs Modal 课程模态
class Classs extends Model
{
//
protected $fillable = [
'id',
'title',
];
public function section()
{
return $this->hasMany('App\Section');
}
}
Section Modal 部分模态
class Section extends Model
{
//
protected $fillable = [
'id',
'title',
'class_id', //foreign key of Classs
'user_id',
];
public function classs()
{
return $this->belongsTo('App\Classs');
}
But in actual when I get result, it gets all the classes & all the sections. 但实际上当我得到结果时,它会获得所有类和所有部分。 It maybe some error in syntax.
它可能在语法上有些错误。 I m so stuck.
我很困惑。 Please help me in this case.
在这种情况下请帮助我。
You first need to make sure if your JS is getting called directly. 首先需要确定是否直接调用了JS。
Add a couple of console.log
calls to the script: 向脚本添加几个
console.log
调用:
<script>
jQuery(document).ready(function ($) {
console.log('listening for change event', $('select[name=classs]')[0]);
$('select[name=classs]').on('change', function () {
var selected = $(this).find(":selected").attr('value');
console.log('change event fired. selected value:', selected);
$.ajax({
url: base_url + '/classs/'+selected+'/sections/',
type: 'GET',
dataType: 'json',
}).done(function (data) {
console.log('ajax response', data);
var select = $('select[name=section]');
select.empty();
select.append('<option value="0" >Please Select Product</option>');
$.each(data,function(key, value) {
select.append('<option value=' + key.id + '>' + value.title + '</option>');
});
console.log("success");
})
});
});
Now check: 现在检查:
listening for change event
logged on page load, with the correct element as a parameter? listening for change event
页面加载时记录的listening for change event
,并将正确的元素作为参数? change event fired
logged on select value change, with the correct value? change event fired
是否在选择值更改时记录,具有正确的值? ajax response
logged with the correct data (id, title)? ajax response
?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.