php - 使用 jQuery ajax 选择依赖下拉列表并显示所选值
问题描述
我想单独获取每个 lab_test 的成本,但它给了我所有的成本。我试过使用 ->first(); 和 ->first(['cost']); 在控制器中,但收到类似“响应内容必须是实现 __toString() 的字符串或对象,给定“对象”之类的错误。我正在我的项目中实现 Dependent 下拉选择框。
控制器测试.php
class Test extends Controller
{
public function cost(Request $request){
$lab_data = \DB::table('lab_category')->select('lab_category_id','category_name')->get();
return view('pages/medicinecost')->with('lab_category',$lab_data);
}
public function costSub(Request $request){
$get_lab_cat_id = $request->get('labCategId');
$lab_sub_data = \DB::table('lab_sub_category')
->leftJoin('lab_category','lab_category.lab_category_id','=','lab_sub_category.category_id')
->where('lab_category_id', $get_lab_cat_id)
->select('sub_category_name','lab_sub_category_id')->get();
return $lab_sub_data;
}
public function costTest(Request $request){
$get_lab_sub_id = $request->get('labSubId');
$lab_test_data = \DB::table('lab_test')
->leftJoin('lab_sub_category','lab_sub_category.lab_sub_category_id'
,'=','lab_test.sub_category_id')
->where('sub_category_id',$get_lab_sub_id)
->where('hide',0)
->select('lab_name','lab_test_id')->get();
return $lab_test_data;
}
public function labTestprice(Request $request){
$get_lab_test_id = $request->get('labtid');
$cost = \DB::table('lab_test')
->leftJoin('lab_sub_category','lab_sub_category.lab_sub_category_id','=','lab_test.sub_category_id')
->where('lab_test_id',$get_lab_test_id)
->orWhere('hide',0)
->select('cost','lab_test_id')->get();
// dd($cost);
return $cost;
}
}
路由.php
Route::get('labdetails','Test@cost');
Route::post('get_lab_sub','Test@costSub');
Route::post('get_lab_sub_cat','Test@costTest');
Route::post('get_lab_cost_rs','Test@labTestprice');
药价.blade.php
<body>
<h1><p>Lab Cost</p></h1><br>
<div class="container">
<div class="col-lg-3">
<div class="form-group">
<select name="labCat" id="labC" class="form-control">
<option value="0" disabled="true" selected="true">Select Lab Category</option>
@if(isset($lab_category))
@foreach($lab_category as $lb)
<option value="{{$lb->lab_category_id}}">{{$lb->category_name}}</option>
@endforeach
@endif
</select>
</div>
<div class="form-group">
<select name="labSub" id="labS" class="form-control">
<option value="0" disabled="true" selected="true">Select Lab Sub Category</option>
</select>
</div>
<div class="form-group">
<select name="labTest" id="labT" class="form-control">
<option value="0" disabled="true" selected="true">Select Lab Test</option>
</select>
</div>
<div class="col-md-2"><span id="loader"><i class="fa fa-spinner fa-3x fa-spin"></i></span></div>
</div>
</div>
<div>
<p id="testCost"></p>
</div>
<script>
$(document).ready(function() {
$('#labC').on('change', function(){
var labCategId = $(this).val();
if(labCategId) {
$.ajax({
processing : 'true',
serverSide : 'true',
url: 'get_lab_sub',
type:"POST",
data : {labCategId:labCategId,"_token":"{{ csrf_token() }}"},
dataType:"json",
success:function(data) {
if(data){
$('#labS').empty();
$.each(data, function(key, value){
$('#labS').append('<option value="'+value.lab_sub_category_id+'">' + value.sub_category_name + '</option>');
});
}
},
});
} else {
$('select[name="labS"]').empty();
}
});
$('#labS').on('change' ,function () {
var labSubId = $(this).val();
if(labSubId){
$.ajax({
processing : 'true',
serverSide : 'true',
url :'get_lab_sub_cat',
type:"POST",
data :{ labSubId:labSubId,"_token":"{{ csrf_token() }}"},
dataType: "json",
success:function (data) {
if(data){
$('#labT').empty();
$.each(data, function(key, value){
$('#labT').append('<option value="'+ value.sub_category_id +'">' + value.lab_name + '</option>');
});
}
else {
$('#labT').empty();
}
}
});
}
})
$('#labT').on('change' ,function () {
var lab_test_cost_id = $(this).val();
if(lab_test_cost_id){
$.ajax({
processing : 'true',
serverSide : 'true',
url :'get_lab_cost_rs',
type:"POST",
data :{ labtid:lab_test_cost_id,"_token":"{{ csrf_token() }}"},
dataType: "json",
success:function (data) {
if(data){
//$('#labT').empty();
$.each(data, function(key, value){
$('#testCost').append('<p value="'+value.lab_test_id +'"> '+ value.cost + '</p>');
//$('#testCost').append('<p value="'+value.lab_test_id+'">'+value.cost+'</p>');
});
}
}
});
}
});
});
</script>
</body>
每当我从第三个下拉列表中选择 lab_test 时,它应该是那个 perticuler lab_tests 的成本,而不是显示所有成本。
解决方案
尝试这个:
<body>
<h1><p>Lab Cost</p></h1><br>
<div class="container">
<div class="col-lg-3">
<div class="form-group">
<select name="labCat" id="labC" class="form-control">
<option value="0" disabled="true" selected="true">Select Lab Category</option>
@if(isset($lab_category))
@foreach($lab_category as $lb)
<option value="{{$lb->lab_category_id}}">{{$lb->category_name}}</option>
@endforeach
@endif
</select>
</div>
<div class="form-group">
<select name="labSub" id="labS" class="form-control">
<option value="0" disabled="true" selected="true">Select Lab Sub Category</option>
</select>
</div>
<div class="form-group">
<select name="labTest" id="labT" class="form-control">
<option value="0" disabled="true" selected="true">Select Lab Test</option>
</select>
</div>
<div class="col-md-2"><span id="loader"><i class="fa fa-spinner fa-3x fa-spin"></i></span></div>
</div>
</div>
<div>
<p id="testCost"></p>
</div>
<script>
$(document).ready(function() {
$('#labC').on('change', function(){
var labCategId = $(this).val();
$('#labS').html('');
$('#labS').append('<option value="0" disabled="true" selected="true">Select Lab Sub Category</option>');
$('#labT').html('');
$('#labT').append('<option value="0" disabled="true" selected="true">Select Lab Test</option>');
if(labCategId) {
$.ajax({
processing : 'true',
serverSide : 'true',
url: 'get_lab_sub',
type:"POST",
data : {labCategId:labCategId,"_token":"{{ csrf_token() }}"},
dataType:"json",
success:function(data) {
if(data){
$.each(data, function(key, value){
$('#labS').append('<option value="'+value.lab_sub_category_id+'">' + value.sub_category_name + '</option>');
});
}else {
$('#labS').empty();
}
},
});
} else {
$('select[name="labS"]').empty();
}
});
$('#labS').on('change' ,function () {
var labSubId = $(this).val();
$('#labT').html('');
$('#labT').append('<option value="0" disabled="true" selected="true">Select Lab Test</option>');
if(labSubId){
$.ajax({
processing : 'true',
serverSide : 'true',
depends : ['#labC'],
url :'get_lab_sub_cat',
type:"POST",
data :{ labSubId:labSubId,"_token":"{{ csrf_token() }}"},
dataType: "json",
success:function (data) {
if(data){
$.each(data, function(key, value){
$('#labT').append('<option value="'+ value.lab_test_id +'">' + value.lab_name + '</option>');
});
}
else {
$('#labT').empty();
}
}
});
}
})
$('#labT').on('change' ,function () {
var lab_test_cost_id = $(this).val();
if(lab_test_cost_id){
$.ajax({
processing : 'true',
serverSide : 'true',
url :'get_lab_cost_rs',
type:"POST",
data :{ labtid:lab_test_cost_id,"_token":"{{ csrf_token() }}"},
dataType: "json",
success:function (data) {
if(data){
$.each(data, function(key, value){
$('#testCost').append('<h5>The Lab Cost is </h5><p value="'+value.lab_test_id +'"> '+ value.cost + '</p>');
});
}
}
});
}
});
});
</script>
</body>
推荐阅读
- java - Casting DocumentSnapshot to CustomHashMap in Firestore
- python - Does Julia have a same way to read and write data (Array & String) as Python?
- mongodb - mongo Bulk Operations speed in 3.6 version and before version
- javascript - After opening new screen from bottom tab bar screen on returning back the bottom tab bar gets hide in react-native
- html - Trouble with overlay div over div
- salesforce - Travel Salesforce CRM Showcase
- vue.js - How to programmatically destroy a Vue3 component instance?
- php - Remove specific folder name from url using htaccess in codeigniter
- python - Reading and writing a json file in python
- blazor - "'<' is an invalid start of a value." ASP.NET-Core hosted Blazor Webassembly