Laravel框架基于ajax实现二级联动功能示例


Posted in PHP onJanuary 17, 2019

本文实例讲述了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', compact('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)
{  // 当选中的为请选择规则时,自己拼一个数据,当success时,判断
 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框架基于ajax实现二级联动功能示例

Laravel框架基于ajax实现二级联动功能示例

希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。

PHP 相关文章推荐
十天学会php之第六天
Oct 09 PHP
PHP中动态显示签名和ip原理
Mar 28 PHP
php调用mysql数据 dbclass类
May 07 PHP
遍历指定目录下的所有目录和文件的php代码
Nov 27 PHP
PHP中file_exists与is_file,is_dir的区别介绍
Sep 12 PHP
浅谈php serialize()与unserialize()的用法
Jun 05 PHP
在wamp集成环境下升级php版本(实现方法)
Jul 01 PHP
PHP多线程之内部多线程实例分析
Mar 09 PHP
Yii框架分页实现方法详解
May 20 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
Nov 03 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
Mar 15 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
Aug 17 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
Jan 17 #PHP
strpos() 函数判断字符串中是否包含某字符串的方法
Jan 16 #PHP
Laravel框架实现的批量删除功能示例
Jan 16 #PHP
Laravel框架实现的rbac权限管理操作示例
Jan 16 #PHP
PHP基于cookie实现统计在线人数功能示例
Jan 16 #PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
Jan 15 #PHP
对php 判断http还是https,以及获得当前url的方法详解
Jan 15 #PHP
You might like
制作美丽的拉花
2021/03/03 冲泡冲煮
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
php实现生成验证码实例分享
2016/04/10 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
js初始化验证实例详解
2016/11/26 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
详解Python yaml模块
2020/09/23 Python
2019史上最全Database工程师题库
2015/12/06 面试题
心理健康教育心得体会
2013/12/29 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
精彩的广告词
2014/03/19 职场文书
庆七一宣传标语
2014/10/08 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
解除租赁合同协议书
2016/03/21 职场文书
以下牛机,你有几个
2022/04/05 无线电
Redis实战高并发之扣减库存项目
2022/04/14 Redis
Python 匹配文本并在其上一行追加文本
2022/05/11 Python
在python中读取和写入CSV文件详情
2022/06/28 Python