使用jQuery ajax选择依赖下拉列表并显示所选值
问题描述 投票：0回答：1
Controller Test.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;
}
}
Route.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');
medicinecost.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时，应该是该实验室的成本，而不是显示所有成本。
1个回答
1
投票
投票
试试这个：
<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>
最新问题
- 如何在Python中将列表中的整数相加（对数字列表求和）？
- 同一 div 标签内所有文本单词的 XPath？
- 如何在 Jetpack Compose 中向 TextField 添加不可编辑的后缀（后缀）？
- 如何将Flutter应用中拍摄的图片保存到计算机目录并发送到Flask服务器？
- Speingboot httpclient 添加重复的 cookie 标头
- 任何人都可以帮助我如何为同一 div 标签内的所有文本单词编写 xpath
- 重置启动计时器 - unity
- 如何在Qt中打印pdf文件
- 访问在 Docker 容器中运行的 Gatsby 应用程序时出现问题
- 使用VueDraggable自定义“幽灵”元素
- django model.py 文件保持不变
- CoAP客户端如何接收超过1024的大数据
- <access sslFlags="Ssl.SslRequireCer">
- 如何将 CSS 应用到基于所选通用主题的 APEX 交互式报告？
- 基于布尔值调用覆盖值（C#、WinForms）
- Powershell：如何动态引用我的哈希表
- 将更多提交推送到当前 PR 后无法运行 Github 操作
- TypeScript：noop => noop
- 如何将自动创建的代码转换为类而不是字符串？
- OnCalculate 函数的 MQL4 错误
© www.soinside.com 2019 - 2024. All rights reserved.