Laravel框架基于ajax实现二级联动功能示例
网络编程 2021-07-04 23:24www.168986.cn编程入门
这篇文章主要介绍了Laravel框架基于ajax实现二级联动功能,结合实例形式分析了Laravel框架ajax数据读取及联动菜单的构造与使用技巧,需要的朋友可以参考下
本文实例讲述了Laravel框架基于ajax实现二级联动功能。分享给大家供大家参考,具体如下:
1、html页面:
<div class="form-group"> <label for="rule">过期规则:</label> <select name="rule" id="rule" class="form-control" style="width:20%; margin-right: 40px;"> <option value="0" rule_id="0">请选择规则</option> @foreach($rules as $rule) <option value="{{ $rule->value }}" rule_id="{{ $rule->id }}">{{ $rule->name }}</option> @endforeach </select> <label for="time">过期倍数:</label> <select name="time" id="time" class="form-control" style="width:20%;"> <option value="0">请选择倍数</option> </select> <span id="auto"></span> </div>
过期规则是在页面加载时,便已经从数据表中取出来放进去了:
$projects = Project::all(); $rules = Rule::all(); return view('key.create', pact('projects', 'rules'));
2、ajax代码:
$("#rule").change(function() { $.post("{{ url('key/createTime') }}/"+$(this).find("option:selected").attr("rule_id"), { "_token": "{{ csrf_token() }}" }, function(data) { $("#time").html("<option value='0' name='time'>请选择倍数</option>"); if(data.value == 0) { // 当选择请选择规则时,不会向下执行 return false; } $.each(data, function(i, time) { $("#time").append("<option value='" + time.value + "'>" + time.value + "</option>"); }); $("#time").append("<option id='auto_time'>自定义</option>"); }); });
当过期规则改变时,将id传到createTime()方法中
3、createTime()
方法:
public function createTime($rule_id) { // 当选中的为请选择规则时,自己拼一个数据,当suess时,判断 if ($rule_id == 0) { return ['id'=>0, 'value'=>0, 'rule_id'=>0]; } $times = Rule::find($rule_id)->time; return $times; }
对$times的处理:rule和time表是一对多的关系:
public function time() { return $this->hasMany(\App\Model\Time::class, 'rule_id', 'id'); }
4、效果:
更多关于Laravel相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》及《》
希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程