如何修复带有Ajax错误的动态下拉列表 [英] How to fix dynamic dropdown list with ajax error
本文介绍了如何修复带有Ajax错误的动态下拉列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我选择一个类别以向我显示该特定类别的所有子类别时,我想这样做,但这是我得到的错误:
I want when I select a category to show me all the subcategories for that specific category, but this is the error that I am getting:
获取 http://localhost:8000/shto/njesin-stratigrafike? sektori + id = III 500 (内部服务器错误)
GET http://localhost:8000/shto/njesin-stratigrafike?sektori+id=III 500 (Internal Server Error)
这是下拉列表的html代码
Here is the html code for dropdown lists
<select class="form-control" name="selected_sector2" id="category">
<option value="blank">Zgjedh sektorin</option>
@foreach($sektorat['sektorat2'] as $sektori2)
<option name="sektori">
{{ $sektori2->sektori_nr }}
</option>
@endforeach
</select>
这是路线代码
Route::get('shto/njesin-stratigrafike', 'NjesiteStratigrafikeController@shtoNjesiStratigrafike');
这是控制器代码
class NjesiteStratigrafikeController extends Controller
{
public function shtoNjesiStratigrafike(){
$selected_sector = Input::get('selected_sector2');
$sector_id = Sektori::where('sektori_nr',$selected_sector)
->value('sektori_id');
$kuadratet = Kuadrati::where('sektori_id_fk', '=' ,$sector_id)->get();
return Response::json($kuadratet);
}
}
这是ajax代码
<script type="text/javascript">
$('#category').on('change', function(e) {
var sektori_id = e.target.value;
// Ajax
$.get('/shto/njesin-stratigrafike?sektori+id=' + sektori_id, function(data) {
// Success data
$('#subcategory').empty();
$('#subcategory').append(' Please choose one');
$.each(data, function(index, subcatObj) {
$('#subcategory').append('' + subcatObj.subcategory_name + '</option>');
});
});
});
</script>
推荐答案
您可以看到以下代码 在视图
you can see following code in view
<div class="form-group m-r-10">
<label for="exampleInputName2">Category</label>
<select class="form-control select2 productcategory" name="productcategory">
<option value="0" disabled="true" selected="true">
Product Category
</option>
@foreach($category as $c)
<option value="{{$c->id}}">{{$c->type_name}}</option>
@endforeach
</select>
</div>
<div class="form-group m-r-10">
<label for="exampleInputName2">Name</label>
<select class="form-control productname" name="productname">
<option value="0" disabled="true" selected="true">Product Name</option>
@foreach($products as $p)
<option value="{{$p->id}}">{{$p->name}}</option>
@endforeach
</select>
</div>
在 ajax
<script type="text/javascript">
$(document).ready(function(){
/*--------------------------------------------------------------------------------------------------------------
* Click Add more Product
*/
$(document).on('change','.row .card_prod .productcategory',function () {
console.log("changeproduct category");
var div=$(this).parent().parent().parent().parent();
var category_id=$(this).val();
console.log(category_id);
var op="";
$.ajax({
type:'GET',
url:'{!!URL::route('findProductName')!!}',
// dataType:'json',
data:{id:category_id},
success:function(data)
{
//tr.find('.price').val(data.price);
console.log(data);
for(var i=0;i<data.length;i++){
console.log(data[i].name);
// console.log(i);
op+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
}
// div.find('.productname').css('background-color','pink');
div.find('.productname').html("");
div.find('.productname').append(op);
},
error:function(msg){
console.log(msg);
console.log("error");
}
});
});
// document DOM end
</script>
在路线
Route::get('/findProductName',array('as'=>'findProductName','uses'=>'InventoryController@findProductName'));
在控制器
public function findProductName(Request $request)
{
$data=Product::select('name','id')->where('type_fk_id',$request->id)->take(100)->get();;
return response()->json($data);
}
这篇关于如何修复带有Ajax错误的动态下拉列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文